1、Text
相当于Android中的TextView，用于显示文本
Text属性官方文档：http://reactnative.cn/docs/0.47/text.html#content
2、TextInput
相当于EditText控件，用户接收用户输入的信息
常用属性：
其他属性可参照官方文档：http://reactnative.cn/docs/0.47/textinput.html#content
autoCapitalize
首字母自动大写，Android上好像没什么效果，我在模拟器上运行的，并没看到效果
- none：不自动变为大写
- sentences：将每句话的首字母自动改成大写
- words：将每个单词的首字母自动改成大写
- characters：将每个英文字母自动改为大写
placeholder
在没有输入任何内容时，显示的占位字符，等同于android中的
android:hint属性
value
设置内容，等同于android中的
android:text属性
placeholderTextColor
占位符文字颜色，等同于android中的
android:textColorHint属性
password
设置为
true后，输入的内容将以私密形式显示，在android中好像没效果；要对输入内容做私密显示用secureTextEntry={true}属性
等同于android中的android:password="true"
maxLength
限制最大可输入内容长度，和android中的maxLength一样，使用时有需要注意，值应该用{}包起来，否则会报错
maxLength={5}
keyboardType
设置键盘样式，等同于android中的
android:inputType
- default
- numeric 数字键盘
- email-address
- phone-pad
onChange
文字变化监听，回调方法不带文字内容
onChangeText
文字变化监听,回调方法带文字内容
onEndEditing
输入状态结束时回调
3、Image
相当于android中的ImageView控件
常用属性：
Image属性官方文档：http://reactnative.cn/docs/0.47/image.html#content
source
图片源，等同于android中的src，但功能比ImageView更强大，可接受来自网络或者本地资源图片
uri：可以加载网络图片
require:加载本地图片，相对路径
android下可以支持png、jpg、jpeg、bmp、gif、webp格式图片，需要添加下面的第三方库
dependencies {
// 如果你需要支持Android4.0(API level 14)之前的版本
compile 'com.facebook.fresco:animated-base-support:1.0.1'
// 如果你需要支持GIF动图
compile 'com.facebook.fresco:animated-gif:1.0.1'
// 如果你需要支持WebP格式，包括WebP动图
compile 'com.facebook.fresco:animated-webp:1.0.1'
compile 'com.facebook.fresco:webpsupport:1.0.1'
// 如果只需要支持WebP格式而不需要动图
compile 'com.facebook.fresco:webpsupport:1.0.1'
}
4、Button
这个没什么好说的，和android中的Button没多大区别
Button属性官方文档：http://reactnative.cn/docs/0.47/button.html#content
5、ListView
和Android中ListView一样，用于展示数据，但使用上有很大差异
import React, {Component} from 'react';
import {ListView, Text, StyleSheet} from 'react-native';
class ListViewDemoActivity extends React.Component {
constructor(props) {
super(props);
//数据源
let datas = ["列表数据1","列表数据2","列表数据3","列表数据4"];
//设置notifyDataSetChanged
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
//dataSource就是遍历出的数组元素
this.state = {
dataSource: ds.cloneWithRows(datas),
};
}
render() {
return (
<ListView
initialListSize={3}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text style={styles.itemText}>{rowData}</Text>}
/>
);
}
}
let styles = StyleSheet.create({
itemText:{
marginTop:10,
backgroundColor:"#ff0000",
paddingTop:15,
paddingBottom:15,
textAlign:"center",
color:"#ffffff"
}
})
export default ListViewDemoActivity
