View
- 个人感觉
View就类似于html中的div标签，支持flexbox布局。 - 一个简单的练习，类似携程的格子布局。
render() {
return (
<View style={[styles.flex]}>
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item,styles.lineLeft]}>
<View style={[styles.flex,styles.center,styles.lineBottom]}>
<Text style={styles.font}>机票</Text>
</View>
<View style={[styles.flex,styles.center]}>
<Text style={styles.font}>火车票</Text>
</View>
</View>
<View style={[styles.item,styles.lineLeft]}>
<View style={[styles.flex,styles.center,styles.lineBottom]}>
<Text style={styles.font}>旅游</Text>
</View>
<View style={[styles.flex,styles.center]}>
<Text style={styles.font}>攻略</Text>
</View>
</View>
</View>
</View>
);
Text
-
Text类似于我们iOS开发中的UILabel控件。 - 比
UILabel相比，我们实现富文本效果不必那么繁琐，因为Text组件可以嵌套，内部Text组件可以继承外部Text。这样实现富文本效果只需要在内层嵌套Text设置不同的样式表style就可以。
<View style={styles.headBox}>
<Text style = {styles.font}>
<Text style = {styles.titleStyle1}>网易</Text>
<Text style = {styles.titleStyle2}>新闻</Text>
<Text style = {styles.titleStyle3}>有态度"</Text>
</Text>
</View>
-
Text可以通过onPress添加点击事件。注意方法的绑定，以及箭头函数的使用。 -
onLongPress长按回调事件。 -
numberOfLines最多显示多少行。 -
onLayout function当组件布局发生变化时会调用这个方法。 -
adjustsFontSizeToFit指定字体是否随着给定样式的限制而自动缩放。 -
allowFontScaling控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。 -
selectable决定用户是否可以长按选择文本，以便复制和粘贴。
Navigator
-
Navigator和NavigatorIOS都可以用来管理应用中“场景”的导航（也可以称作屏幕）。导航器建立了一个路由栈，用来弹出，推入或者替换路由状态。它们和html5中的history API很类似。主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类，而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容iOS和Android，而NavigatorIOS只能用于iOS。 - 导航器通过路由对象来分辨不同的场景。利用
renderScene方法，导航栏可以根据指定的路由来渲染场景。 - 可以通过
configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。
render() {
let rootViewName = 'FirstView';
let rootComponent = FirstView;
return (
<Navigator
initialRoute = {{ name: rootViewName, component: rootComponent }}
configureScene = {(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJump ;
}}
renderScene = {(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator = {navigator} />
}} />
);
}
-
push方法中通过params传递参数，通过传递方法到二级页面，pop时调用实现回调方法
push = (Id) =>{
var _this = this;
const navigator = this.props.navigator;
if (navigator) {
navigator.push({
name: 'SecondView',
component: SecondView,
params: {
id: Id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
pop = () =>{
if (this.props.navigator) {
this.props.navigator.pop();
let user = USER_MODELS[this.state.Id];
this.props.getUser(user);
}
}
TextInput
-
autoCapitalize：枚举类型，可选值有none sentences wordscharacters 当用户输入时，用于提示 -
placeholder：占位符，在输入前显示的文本内容 -
value：文本输入框的默认值 -
placeholderTextColor：占位符文本的颜色 -
password：boolean类型true表示密码输入显示* -
multiline：多行输入 -
editable：文本框是否可输入 -
autoFocus:自动聚焦 -
clearButtonMode：枚举类型，never while-editing unless-editing always用于显示清除按钮 -
maxLength：能够输入的最长字符数 -
enablesReturnKeyAutomatically：如果为true表示没有文本时键盘是不能有返回键的，其默认值为false -
returnKeyType：枚举类型default go google join next route search send yahoo done emergency-call表示软键盘返回键显示的字符串 -
secureTextEntry：隐藏输入内容，默认值为false -
onChangeText：当文本输入框的内容变化时，调用改函数；onChangeText接收一个文本的参数对象 -
onChange：当文本变化时，调用该函数 -
onEndEditing：当结束编辑时，调用改函数 -
onBlur：失去焦点触发事件 -
onFocus：获得焦点时触发事件 -
onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件
Touchable类组件
-
TouchableHighlight高亮 - 属性：
activeOpacity(设置透明度)、onHideUnderlay、onShowUnderlay、underlayColor(点击时背景阴影效果的背景颜色) -
TouchableOpacity透明度 - 属性：
activeOpacity -
TouchableWithoutFeedback无反馈 不会出现任何视觉变化 - 不建议使用；属性：
onLongPress、onPressIn、onPressOut - 在
app中我们希望点击的时候会有一些视觉上的变化，这个变化会提醒我们已经点击过了，从而避免重复点击
Image
resizeMode：图片适用的模式cover、contain、stretchsource:图片的引用地址网络图片：
source={{uri:'http://.png'}}本地图片：
source={require('./baidulogo.png')}静态图片资源：注意：如果你添加图片的时候packager正在运行，则你需要重启packager以便能正确引入新添加的图片
注意：为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串。
如果你在编写一个混合
App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸
注意：网络图片，你需要手动指定图片的尺寸
关于图片的尺寸，
React Native会自动为你选好。如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出50%，以使图片看起来仍然足够清晰。这一切过程都是自动完成的，所以你不用操心自己去完成这些繁琐且易错的代码。
Picker
-
View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式) -
onValueChange function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数 -
itemValue:该属性值为被选中的item的属性值 -
itemPosition:该选择器被选中的item的索引position -
selectedValue: any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字 -
style pickerStyleType该传入style样式，设置picker的样式风格
enabled bool如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择 -
mode enum ('dialog','dropdown')选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格 -
dialog:该值为默认值，进行弹出一个模态dialog(弹出框) -
dropdown:以picker视图为基础，在该视图下面弹出下拉框 -
prompt string设置picker的提示语(标题),在Android平台上面，模式设置成'dialog',显示弹出框的标题
<View style={styles.container}>
<Text >
Picker选择器实例
</Text>
<Picker
style={{width:200}}
selectedValue={this.state.language}
onValueChange={(value) => this.setState({language: value})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="javaScript" />
</Picker>
<Text>当前选择的是:{this.state.language}</Text>
</View>
Switch
-
View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式) -
disabled bool如果该值为true,用户就无法点击switch开关控件，默认为false -
onValueChange function方法，当该组件的状态值发生变化的时候回调方法 -
value bool该开关的值，如果该值为true的时候，开关呈打开状态，默认为false
<View style={styles.container}>
<Text>
Swtich实例
</Text>
<Switch
onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
style={{marginBottom:10,marginTop:10}}
value={this.state.falseSwitchIsOn} />
<Switch
onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
value={this.state.trueSwitchIsOn} />
</View>
ProgressBar
ProgressViewIOS-
progress number当前的进度值（0到1之间）。 -
progressImage Image.propTypes.source一个可以拉伸的图片，用于显示进度条。 -
progressTintColor string进度条本身染上的颜色。 -
progressViewStyle enum('default', 'bar')进度条的样式。 -
trackImage Image.propTypes.source一个可拉伸的图片，用于显示进度条后面的轨道。 -
trackTintColor string进度条轨道染上的颜色。
<View style={styles.container}>
<ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
</View>
componentDidMount() {
this.updateProgress();
}
updateProgress() {
var progress = this.state.progress + 0.01;
this.setState({ progress });
this.timer = requestAnimationFrame(() => this.updateProgress());
}
getProgress(offset) {
console.log('11');
var progress = this.state.progress + offset;
return Math.sin(progress % Math.PI) % 1;
}
ProgressBarAndroidcolor string进度条的颜色。indeterminate indeterminateType决定进度条是否要显示一个不确定的进度。注意这个在styleAttr是Horizontal的时候必须是false。progress number当前的进度值（在0到1之间）。-
styleAttr STYLE_ATTRIBUTES进度条的样式。可取值有：HorizontalSmallLargeInverseSmallInverseLargeInverse
<View style={styles.container}>
<ProgressBarAndroid progress={this.state.progress} {...this.props} />
</View>
WebView
automaticallyAdjustContentInsets：是否自动调整内部内容bounces（IOS）：回弹效果 如果为false，则内容拉到底部或头部不回弹，默认为truedomStorageEnabled(Android)：仅限Android平台。指定是否开启DOM本地存储javaScriptEnabled：仅限Android平台。iOS平台JavaScript是默认开启的contentInset：内部内容偏移值 该值为一个JavaScript对象{top:number,left:number,bottom:number,right:number}source:{{uri:'网址'}}在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）{{html:'html代码块'}}injectedJavaScript:注入的js代码，其值为字符串，如果加上了该属性，就会在webview里面执行js代码（在网页加载之前注入）mediaPlaybackRequiresUserAction：设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为falseonNavigationStateChange：监听导航状态变化的函数（当发现浏览器地址改变时，触发事件）renderError：监听渲染页面出错的函数startInLoadingState：是否开启页面加载的状态renderLoading:webview组件正在渲染页面时触发的函数，需要同startInLoadingState一起使用，当startInLoadingState为true时该函数才起作用scrollEnabled（IOS）：表示webview里面页面是否能滚动，如果其值为true则可以滚动，否则禁止滚动scalesPageToFit：按照页面比例和内容宽高比例自动缩放内容
ListView
- 列表
<ListView
dataSource={this.dataSource.cloneWithRows(this.state.dataArr)}
renderRow={this.renderRow} //设置cell
style={{width:screenWidth}}
onEndReached={ this._toEnd }
onEndReachedThreshold={20}
renderFooter={ this._renderFooter }
enableEmptySections = {true}
refreshControl={
<RefreshControl
refreshing={this.state.isRefresh}
onRefresh={this._onRefresh}
tintColor="gray"
title="Loading..."
titleColor="gray"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>}
/>
- 卡片
<ListView //创建ListView
dataSource={this.dataSource.cloneWithRows(this.state.car)} //设置数据源
renderRow={this.renderRow} //设置cell
contentContainerStyle={styles.listViewStyle}//设置cell的样式
onEndReached={ this._toEnd }
onEndReachedThreshold={10}
renderFooter={ this._renderFooter }
enableEmptySections = {true}
removeClippedSubviews={false}
refreshControl={
<RefreshControl
refreshing={this.isRefreshing}
onRefresh={this._onRefresh}
tintColor="gray"
title="Loading..."
titleColor="gray"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>}
/>
- 分组
render(){
const { brand} = this.props;
var Arr = brand ,
sectionIDs =[],//所有区ID的数组
rowIDs =[];//行ID数组
for (let i in brand ) {
sectionIDs.push(i);
rowIDs.push(brand[i])
}
return(
<ListView//创建表，并设置返回section和cell的方法
dataSource={this.dataSource.cloneWithRowsAndSections(Arr,sectionIDs,rowIDs)}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
renderHeader={this.renderHeader }
/>
)
}
