（三）[状态栏字体与Scroll以及列表]React Native 从零到构建Android与IOS应用发布

在使用了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(

                       

                               

                       

                );

        }

}

在RN里面不会默认滚动，所以导致我们发现内容超出屏幕时，并不能通过拖动来达到浏览超出屏幕区域的内容。

所以我们需要使用到另一个组件来包含内容，即：ScrollView

ScrollView用法很简单，在顶层View下包含即可

例如：

   

                // ....你的内容

   

下面我们来介绍列表，通常有几种列表组件供我们选择，其中还牵扯到性能的问题，我有试过其他几种提升性能的，感觉体验不怎么好，主要是总共50条，它只渲染一屏的内容，要等一会才渲染出后续的内容导致大块空白（安卓下），可能是由于我使用不当，最后看到ANTD是使用的ListView,那我也就使用这个组件好了

ListView 的数据需要通过ListView.DataSource进行转换

所以我们需要在 注册props属性的时候就要定义转换方法，网上有例子：

const dataSource = new ListView.DataSource({

        rowHasChanged: (row1, row2) => row1 !== row2,

});

然后就是定义每一个子项的内容返回方法

_renderItem = (data) =>{

        //注意，这里只能使用TouchableOpacity，使用touchablehighlight等会报错

                姓名：{data.name}

       

}

然后再在render中使用listview组件

   

        ref={el=>this.lv=el} 

        dataSource={this.state.dataSource} 

        renderRow={this._renderItem.bind(this)}

        useBodyScroll

        //     还可以配置 renderFooter也就是底部loading

        //     pageSize、onScroll、scrollRenderAheadDistance、onEndReached等属性

    >

    

然后就可以把这个组件使用到default Component中了

例如我把刚刚的ListView组件定义为ListViewBasice的自定义组件

那么我就可以直接使用