React Native 之导航栏

一定要参考官网：

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&&params.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'; // 不要加括号{}

React Native 之导航栏

猜你喜欢