ReactNative学习之滚动视图

我们常用的滚动视图有两种：

1、用于简单的滚动布局的视图ScrollView，放在ScrollView中的所有组件都会立即被渲染。这里我们使用ScrollView+Image的方式布局，如果是本地的Image图片，使用require来获取地址，如果是网络图片，使用uri+网络地址获取，此时，需要设置图片的大小。图片具体的使用方式可以参考：http://reactnative.cn/docs/0.47/images.html

export default class ScrollDemo extends Component{
    render(){
        return(
            <ScrollView style={{backgroundColor:'gray'}}>
                <Text>这是111</Text>
                <Image source={require('./images/home.png')} />
                <Image source={require('./images/home.png')} />
                <Text>这是222</Text>
                <Image source={require('./images/home.png')} />
                <Image source={require('./images/home.png')} />
                <Text>这是333</Text>
                <Image source={require('./images/home.png')} />
                <Image source={require('./images/home.png')} />
                <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />
            </ScrollView>
        );
    }
}

另一种滚动视图就是列表，在iOS里就是TableView，这里有两种：一种包括了包含了Section，一种没有包含Section。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

<FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />

SectionList组件和FlatList很类似，只是多了个Section，需要的数据格式也有一点差异。

<SectionList
          sections={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
        />

ReactNative基础知识还剩余网络部分，那个我就不去说明了，可以在网站http://reactnative.cn/docs/0.47/network.html#content上去看下如何处理的。

下一篇我会通过一个Demo把这些基础知识融合进去（除网络部分）。