RN-Component
2017-07-13 本文已影响193人
hliccy
React Native 组件
View
支持 布局、样式、一些触摸处理、和一些无障碍功能的容器
对应原生平台组件：
iOS=>UIView
Android =》android.view.View
Text
显示文本的组件， 支持嵌套、样式以及触摸处理
属性
* numberOfLines number
用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。
* onPress function
当文本被点击以后调用此回调函数。
* selectable function
决定用户是否可以长按选择文本，以便复制和粘贴
样式
* color
* fontSize
* fontStyle enum('normal', 'italic')
* fontWight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
* textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持，在Android上会变为left
嵌套文本
iOS 中显示富文本组件 NSAttributedString
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
TextInput
允许用户在应用中通过键盘输入文本的基本组件
属性
* autoCapitalize enum('none', 'sentences', 'words', 'characters')
控制TextInput是否要自动将特定字符切换为大写：
不设置/没句话第一个字符(默认)/每个单词第一个字符、所有字 符
* autoFocus bool
如果为true，在componentDidMount后会获得焦点。默认值为 false
* editable bool
如果为false，文本框是不可编辑的。默认值为true
* keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
* maxLength number
* multiline bool （默认 false）
* onBlur function 当文本框失去焦点的时候调用此回调函数
* onChange function 当文本框内容变化时调用此回调函数
* onChangeText function 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
* onEndEditing function 当文本输入结束后调用此回调函数
* onFocus function 当文本框获得焦点的时候调用此回调函数。
* onSelectionChange function
长按选择文本时，选择范围变化时调用此函数，传回参数的格式形如 { nativeEvent: { selection: { start, end } } }。
* onSubmitEditing function
此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。
* placeholder string 如果没有任何文字输入，会显示此字符串。
* placeholderTextColor color 占位字符串显示的文字颜色。
图片
Image
显示图片的组件 （网络图片、静态资源、临时本地图片、本地磁盘上）
静态图片资源
<Image source={require('./my-icon.png')} />
require中的图片名字必须是一个静态字符串
网络图片
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />
指定参数
<Image source={{
uri: 'https://facebook.github.io/react/img/logo_og.png',
method: 'POST',
headers: {
Pragma: 'no-cache'
},
body: 'Your Body goes here'
}}
style={{width: 400, height: 400}} />
注：iOS中需设置 App Transport Security
Button
属性
* color color 文本的颜色(iOS)，或是按钮的背景色(Android)
* disabled bool 设置为true时此按钮将不可点击
* onPress function 用户点击此按钮时所调用的处理函数
* title string 按钮内显示的文本
* onPress function 按钮点击事件
ScrollView
封装了平台 ScrollView的组件
ScrollView 一次性渲染所有组件， 性能不足
ListView 惰性渲染，只渲染将要显示在屏幕上的组件
FlatList 0.43 版本支持， 改进版的ListView
属性
horizontal bool 当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
keyboardDismissMode enum('none', "interactive", 'on-drag')
none (默认) 拖拽时不隐藏键盘
on-drag 当拖拽开始的时候隐藏软键盘
interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样
showsHorizontalScrollIndicator bool #
当此属性为true的时候，显示一个水平方向的滚动条。
showsVerticalScrollIndicator bool #
当此属性为true的时候，显示一个垂直方向的滚动条。
pagingEnabled bool #
当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
scrollEnabled bool #
当值为false的时候，内容不能滚动，默认值为true。
方法
scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) #
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。
使用示例:
scrollTo({x: 0, y: 0, animated: true})
scrollToEnd(options?) #
滚动到视图底部（水平方向的视图则滚动到最右边）。
加上动画参数 scrollToEnd({animated: true})则启用平滑滚动动画，或是调用 scrollToEnd({animated: false})来立即跳转。如果不使用参数，则animated选项默认启用。
ListView
属性
dataSource ListView.DataSource 列表数据源
initialListSize number 指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。
pageSize number 每次事件循环（每帧）渲染的行数。
onChangeVisibleRows function
(visibleRows, changedRows) => void
当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行，其中如果值为true表示一个行变得可见，而为false表示行刚刚离开可视区域而变得不可见。
renderHeader function
renderFooter function
() => renderable
页头与页脚会在每次渲染过程中都重新渲染（如果提供了这些属性）。如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。页脚会永远在列表的最底部，而页头会在最顶部。
renderRow function
(rowData, sectionID, rowID, highlightRow) => renderable
从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置
renderSectionHeader function
(sectionData, sectionID) => renderable
如果提供了此函数，会为每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。可以使用 stickySectionHeadersEnabled来决定是否启用其粘性特性。
renderSeparator function
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来
Example
export default class ListViewExample extends Component{
constructor(props) {
super(props);
var ds =new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource:ds,
data:['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row 10','row 11','row 12']
}
}
render(){
return(
<ListView
dataSource={this.state.dataSource.cloneWithRows(this.state.data)}
renderRow={(rowData, sectionId, rowId) => this._renderRow(rowData, sectionId,rowId)}
renderSeparator={this._renderSeparator}
/>
);
}
_renderRow(rowData:string, sectionID:number, rowID:number){
var imgSource = THUMB_URLS[rowID];
return (
<TouchableOpacity>
<View>
<View style={styles.row}>
<Image style={styles.thumb} source={imgSource} />
<Text style={{flex:1,fontSize:16,color:'blue'}}>
{rowData + '我是测试行号哦~'}
</Text>
</View>
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool){
return (
<View
key={`${sectionID}-${rowID}`}
style={{
height: adjacentRowHighlighted ? 4 : 1,
backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
}}
/>
);
}
}
