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)}
/>
</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,
},
})
效果图: