在使用了navigation后，我发现状态栏字体并没有通过navigation的背景颜色变成其他字体颜色，导致深色背景出现黑色文字看不清的情况，所以我们需要在这里使用到一个RN的组件，叫StatusBar,由于我们之前是navigation定义的StackNavigator,所以我们需要用这个组件包含StatusBar
import {StatusBar,...} from 'React-Native';
import {...//这里是你用到的组件} from 'react-navigation';
const TestAppNav=StackNavigator({
// 相关配置
});
export default class TestApp extends component {
render(){
return(
<TestAppNav ...>
<StatusBar backgroundColor="你的nav背景颜色" barStyle="light-content" />
</TestAppNav>
);
}
}
在RN里面不会默认滚动，所以导致我们发现内容超出屏幕时，并不能通过拖动来达到浏览超出屏幕区域的内容。
所以我们需要使用到另一个组件来包含内容，即：ScrollView
ScrollView用法很简单，在顶层View下包含即可
例如：
<View style={{flex:1}}>
<ScrollView>
// ....你的内容
</ScrollView>
</View>
下面我们来介绍列表，通常有几种列表组件供我们选择，其中还牵扯到性能的问题，我有试过其他几种提升性能的，感觉体验不怎么好，主要是总共50条，它只渲染一屏的内容，要等一会才渲染出后续的内容导致大块空白（安卓下），可能是由于我使用不当，最后看到ANTD是使用的ListView,那我也就使用这个组件好了
ListView 的数据需要通过ListView.DataSource进行转换
所以我们需要在 注册props属性的时候就要定义转换方法，网上有例子：
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
然后就是定义每一个子项的内容返回方法
_renderItem = (data) =>{
<TouchableOpacity onPress={...} ...> //注意，这里只能使用TouchableOpacity，使用touchablehighlight等会报错
<View><Text>姓名：{data.name}</Text></View>
</TouchableOpactiy>
}
然后再在render中使用listview组件
<View>
<ListView
ref={el=>this.lv=el}
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}
useBodyScroll
// 还可以配置 renderFooter也就是底部loading
// pageSize、onScroll、scrollRenderAheadDistance、onEndReached等属性
>
</ListView>
</View>
然后就可以把这个组件使用到default Component中了
例如我把刚刚的ListView组件定义为ListViewBasice的自定义组件
那么我就可以直接使用
<View>
<ListViewBasics />
</View>
