React Native 之FlatList

1.新建项目

2.因为要用到导航跳转, 所以添加依赖，，这里拷贝这个：

"dependencies": {
    "@types/react": "^16.9.2",
    "react": "16.8.6",
    "react-native": "^0.60.0",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-reanimated": "^1.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.0.0"
  },

执行:

按照官方步骤:
yarn add react-navigation
yarn add react-native-gesture-handler react-native-reanimated

cd ios
pod install
cd ..

链接第三方库
react-native link react-native-reanimated
react-native link react-native-gesture-handler

4. 代码：

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import {createStackNavigator,createAppContainer} from 'react-navigation'

import App from './App';
import FlatListDemo from './pages/FlatListDemo';
import {name as appName} from './app.json';

const AppRoot = createAppContainer(createStackNavigator({
  App:{
    screen:App,
  },
  FlatListDemo:{
    screen:FlatListDemo,
    defaultNavigationOptions:{
      title:'FlatListDemo'
    }
  }
}))

AppRegistry.registerComponent(appName, () => AppRoot);

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

 import React, {Fragment,Component} from 'react';
 import {
   SafeAreaView,
   StyleSheet,
   ScrollView,
   View,
   Text,
   StatusBar,
   Button,
 } from 'react-native';

 export default class App extends Component {

   render(){
     const {navigation}=this.props;
     return (
       <View>
          <Button
              title={'FlatListDemo'}
              onPress={()=>{
                  navigation.navigate('FlatListDemo');
                }}
          />

       </View>
       );
   }
 }

./pages/FlatListDemo.js

import React, {Fragment,Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  FlatList,
} from 'react-native';

const CITY_NAME = ['北京','上海','广州','武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州'];
export default class FlatListDemo extends Component {
  _renderItem(data){
    return <View style={styles.item}>
          <Text style={styles.text}>{data.item}</Text>
    </View>
  }

  render(){
    return (
      <View>
        <FlatList
          data={CITY_NAME}
          renderItem={(data)=>this._renderItem(data)}
　　　　　　_keyExtractor = (item, index) => index.toString() //必须要写 不然报错
        />
      </View>
      );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems:'center',
    backgroundColor: '#F5FCFF'
  },
  item:{
    backgroundColor: '#168',
    height:200,
    marginRight:15,
    marginLeft:15,
    marginBottom:15,
    alignItems:'center',
    //justifyContetnt:'center',

  },
  text:{
    color:'white',
    fontSize:20,
  },

})

效果图：