一定要参考官网:
https://reactnavigation.org/docs/en/getting-started.html
代码来自慕课网:https://www.imooc.com/course/list?c=reactnative
流程:
1.新建项目
2.修改依赖 (一定要注意版本, 好像其他版本会报各种错误) , 执行 yarn 或者 npm install 安装依赖
"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-navigation": "^3.0.0" },
3. 按照官网步骤配置ios / android
4. 最终代码 navigators文件夹下AppNavigators.js 。pages文件夹下是各个页面。
index.js
import {AppRegistry} from 'react-native'; import App from './navigators/AppNavigators'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);
AppNavigators.js
import React from 'react'; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错 import {Button} from 'react-native'; import { createStackNavigator,createAppContainer } from 'react-navigation'; import HomePage from '../pages/HomePage'; import Page1 from '../pages/Page1'; import Page2 from '../pages/Page2'; import Page3 from '../pages/Page3'; import Page4 from '../pages/Page4'; import Page5 from '../pages/Page5'; const AppStackNavigator = createStackNavigator({ HomePage: { screen: HomePage }, Page1: { screen: Page1, navigationOptions: ({navigation}) => ({ title: `${navigation.state.params.name}页面名`//动态设置navigationOptions }) }, Page2: { screen: Page2, navigationOptions: {//在这里定义每个页面的导航属性,静态配置 title: "This is Page2.", } }, Page3: { screen: Page3, navigationOptions: (props) => {//在这里定义每个页面的导航属性,动态配置 const {navigation} = props; const {state, setParams} = navigation; const {params} = state; return { title: params.title ? params.title : 'This is Page3', headerRight: ( <Button title={params.mode === 'edit' ? '保存' : '编辑'} onPress={()=>{setParams({mode: params.mode === 'edit' ? '' : 'edit'})} } /> ), } } }, }, { defaultNavigationOptions: { // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar } }); const App = createAppContainer(AppStackNavigator) export default App
HomePage.js
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Fragment,Component} from 'react'; import { StyleSheet, View, Text, Button, } from 'react-native'; type Props = {}; export default class HomePage extends Component<Props> { //修改Back按钮 static navigationOptions={ title:'Home', headerBackTitle:'返回哈哈' } render(){ const {navigation}=this.props; return ( <View style={styles.container}> <Text style={styles.welcome}>欢迎来到HomePage</Text> <Button title={'去 Page1'} onPress={()=>{ navigation.navigate('Page1',{name:'动态的'}); }} /> <Button title={'去 Page2'} onPress={()=>{ navigation.navigate('Page2'); }} /> <Button title={'去 Page3'} onPress={()=>{ navigation.navigate('Page3',{name:'Dev iOS'}); }} /> </View> ); } } const styles=StyleSheet.create({ container:{ flex:1, }, welcome:{ fontSize:20, textAlign: 'center', } });
Page1.js
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Fragment,Component} from 'react'; import { StyleSheet, View, Text, Button, } from 'react-native'; export default class Page1 extends Component { render(){ return ( <View style={styles.container}> <Text style={styles.welcome}>欢迎来到Page1</Text> <Button title={'Go Back'} onPress={()=>{ navigation.goBack(); }} /> <Button title={'去Page4'} onPress={()=>{ navigation.navigate('Page4'); }} /> </View> ); } } const styles=StyleSheet.create({ container:{ flex:1, }, welcome:{ fontSize:20, textAlign: 'center', } });
Page2.js
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Fragment,Component} from 'react'; import { StyleSheet, View, Text, Button, } from 'react-native'; export default class Page2 extends Component { render(){ return ( <View style={styles.container}> <Text style={styles.welcome}>欢迎来到Page2</Text> <Button title={'Go Back'} onPress={()=>{ navigation.goBack(); }} /> <Button title={'去Page4'} onPress={()=>{ navigation.navigate('Page4'); }} /> </View> ); } } const styles=StyleSheet.create({ container:{ flex:1, }, welcome:{ fontSize:20, textAlign: 'center', } });
Page3.js
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Fragment,Component} from 'react'; import { StyleSheet, View, Text, Button, TextInput, } from 'react-native'; export default class Page3 extends Component { render(){ const {navigation}=this.props; const {state, setParams} = navigation; const {params} = state; const showText=params&¶ms.mode==='edit'?'正在编辑':'编辑完成' return ( <View style={styles.container}> <Text style={styles.welcome}>欢迎来到Page3</Text> <Text style={styles.welcome}>{showText}}</Text> <TextInput style={styles.input} onChangeText={ text=>{ setParams({title:text}) } } /> <Button title={'Go Back'} onPress={()=>{ navigation.goBack(); }} /> <Button title={'去Page4'} onPress={()=>{ navigation.navigate('Page4'); }} /> </View> ); } } const styles=StyleSheet.create({ container:{ flex:1, }, welcome:{ fontSize:20, textAlign: 'center', }, input:{ height:50, borderWidth:1, marginTop:10, borderColor:'black' } });
Page4.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, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; const Page4 = () => { return ( <Fragment> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> {global.HermesInternal == null ? null : ( <View style={styles.engine}> <Text style={styles.footer}>Engine: Hermes</Text> </View> )} <View style={styles.body}> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Step One</Text> <Text style={styles.sectionDescription}> Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits. </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>See Your Changes</Text> <Text style={styles.sectionDescription}> <ReloadInstructions /> </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Debug</Text> <Text style={styles.sectionDescription}> <DebugInstructions /> </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Learn More</Text> <Text style={styles.sectionDescription}> Read the docs to discover what to do next: </Text> </View> <LearnMoreLinks /> </View> </ScrollView> </SafeAreaView> </Fragment> ); }; const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black, }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark, }, highlight: { fontWeight: '700', }, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right', }, }); export default Page4;
Page5.js
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Fragment,Component} from 'react'; import { StyleSheet, View, Text, Button, } from 'react-native'; export default class Page5 extends Component { render(){ return ( <View style={styles.container}> <Text style={styles.welcome}>欢迎来到Page5</Text> <Button title={'Go Back'} onPress={()=>{ navigation.goBack(); }} /> <Button title={'去Page4'} onPress={()=>{ navigation.navigate('Page4'); }} /> </View> ); } } const styles=StyleSheet.create({ container:{ flex:1, }, welcome:{ fontSize:20, textAlign: 'center', } });
可能会用到的命令:
npm install react-navigation //指定版本安装法: npm install [email protected] --save npm install react-native-gesture-handler react-native link react-native run-ios npm install react[email protected] --save yarn add react-native-gesture-handler react-native link npm uninstall react-navigation --save npm install --save react-native-gesture-handler react-native link react-native-gesture-handler npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm install --save [email protected](根据自己的需求版本) 按照官方步骤: 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
出现的问题:
import App from './App'; // 不要加括号{}