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={()=>{

this.props.navigation.goBack();
}}
/>

<Button
title={'去Page4'}
onPress={()=>{
this.props.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={()=>{
this.props.navigation.goBack();
}}
/>

<Button
title={'去Page4'}
onPress={()=>{
this.props.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 react-navigation@2.0.0 --save
npm install react-native-gesture-handler
react-native link
react-native run-ios


npm install react-navigation@3.0.0 --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 react-native@0.59.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

 

 出現的問題:

import App from './App'; // 不要加括號{}