Be sure to refer to the official website:
https://reactnavigation.org/docs/en/getting-started.html
Mu class codes from the network: https: //www.imooc.com/course/list c = reactnative?
Process:
1. Create a new project
2. Modify dependence (be sure to note the version, like other versions will report a variety of errors), the implementation of yarn or npm install install dependencies
"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. The official website configure ios / android
4. Final Code navigators folder AppNavigators.js. Under pages folder each page.
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
React from Import 'REACT'; // long as the basic components used in the page are to be imported or will be error words Import {from} the Button 'Native-REACT' ; Import {createStackNavigator, createAppContainer} from 'REACT-Navigation' ; from the HomePage Import '../pages/HomePage' ; Import from the Page1 '../pages/Page1' ; Import from Page2 '../pages/Page2' ; Import from Page3 '../pages/Page3' ; Import Page4 from '../pages/Page4' ; Import page5 from '../pages/Page5' ; const AppStackNavigator = createStackNavigator({ HomePage: { Screen: the HomePage }, the Page1: { Screen: the Page1, navigationOptions: (Navigation {}) => ({ title: '$ {name `page navigation.state.params.name} // dynamically set navigationOptions }) }, Page2: { Screen: Page2, navigationOptions: { // defined herein navigation attributes of each page, static configuration title:. "this Page2 iS" , } }, Page3: { Screen: Page3, navigationOptions: (the props) => { / / is defined herein as the properties of each page navigation, dynamic configuration const {navigation} = the 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, // null can be set to disable header StackNavigator the Bar Navigation } }); const the App = createAppContainer (AppStackNavigator) Export default the 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', } });
Command may be used:
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] (according to their needs version) According to the official steps: the Yarn the Add REACT - Navigation the Yarn the Add REACT -native-Gesture-REACT-Native-Handler reanimated CD iOS POD the install CD .. REACT -native Link-Native-REACT reanimated REACT -native REACT-Link Handler-Native-Gesture
Emerging issues:
import App from './App'; // Do not add braces {}