react-native配置路由導航、傳參示例，標題樣式配置

一.關於項目環境配置

    我就是跟着react native中文網一步步來的，模擬器就用的android studio 的原生模擬器，這個模擬器可能跟其他大多數模擬器調出開發菜單的快捷鍵不一樣，我是找了N久才發現快捷鍵是Ctrl+M打開開發菜單，差點都準備換模擬器了，因爲只有打開開發菜單的JS Debugging才能調試，開發菜單如下圖：

二.頁面導航、路由配置

   1.裝react-navigation、react-native-gesture-handler

   2.執行react-native link react-native-gesture-handler

   3.爲了完成 react-native-gesture-handler在 Android 上的安裝，請確保在 MainActivity.java 上完成如下修改：

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

關於react-navigation更多詳細配置和使用方式，參考官網：React Navigation（中英雙語支持）

三、demo代碼

項目根目錄新建src目錄，src下新建pages目錄，創建兩個頁面組件scroll.js，testpage.js

scroll.js：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Image} from 'react-native';

const instructions = Platform.select({
  ios: 'ios',
  android: 'android'
});

export default class Scroll extends Component {
  
  render() {
    params = this.props.navigation.state.params
    return (
      <View>
        <Text>{instructions} Screen</Text>
        <Image 
          source={{
            uri: 'https://reactjs.org/logo-og.png',
            method: 'POST',
            headers: {
              Pragma: 'no-cache',
            },
            // body: 'Your Body goes here',
          }}
          style={{width: '100%', height: 400}}
        />
        <Text>{params && params.text?params.text:null}</Text>
        <Button
            title="Go to testpage"
            onPress={() => this.props.navigation.navigate('Testpage', {name:"lucklin"})}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
 
});

testpage.js：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TextInput} from 'react-native';

export default class Testpage extends Component {
  // static navigationOptions = ({navigation }) =>{
  //   return {
  //     title:navigation.getParam('name', 'A Nested Details Screen'),//第一個參數是傳過來的參數字段名，第二個是沒有找到該字段就顯示的內容
  //   }
  // }
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    console.log(navigationOptions)
    return {
      title: params ? params.name : 'A Nested Details Screen',
      /* 覆蓋全局配置! */
      headerStyle: {
        backgroundColor: 'pink',
      },
      headerTintColor: 'green',
    }
  }

  state = {
    text: ''
  }

  componentDidMount(){
    console.log(this.props.navigation.state.params)
  }

  render() {
    return (
      <View>
        <Text>Testpage</Text>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          placeholder="this is placeholder"
        />
        <Button
            title="Go to scroll"
            onPress={() => this.props.navigation.navigate('Scroll', {text: this.state.text})}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
 
});

在src下再建一個AppContainer.js：

import { createStackNavigator, createAppContainer } from "react-navigation";
import Scroll from "./pages/scroll"
import Testpage from "./pages/testpage"

const AppNavigator = createStackNavigator({
    Scroll: {
        screen: Scroll,
        navigationOptions:{
            title:'Scroll頁',
        },
    },
    Testpage: {
        screen: Testpage,
    }
},{
    initialRouteName: "Scroll",
    defaultNavigationOptions:{//配置全局標題樣式
        headerStyle: {
            backgroundColor: '#f4511e',//標題背景顏色
        },
        headerTintColor: '#fff',//標題文字顏色
        headerTitleStyle: {
            fontWeight: 'bold',
            alignSelf:'center'
        },
    }
});
export default  createAppContainer(AppNavigator);

修改App.js：

import React, {Component} from 'react';
import AppContainer from "./src/AppContainer"

export default class App extends Component {
  componentDidMount(){
    console.log(__DEV__)//開發環境得到true
  }

  render() {
    return <AppContainer></AppContainer>
  }
}

然後執行編譯預覽：