讓我們來用 React Navigation 創建一個簡單的跨平臺(Android and iOS)的應用

Setup and Installation

首先,確保你已經安裝好了RN所需的環境
其次,創建一個新的項目,添加react-navigation

# Create a new React Native App
react-native init SimpleApp
cd SimpleApp

# Install the latest version of react-navigation from npm
npm install --save react-navigation

# Run the new app
react-native run-android # or:
react-native run-ios

確認你已經成功看到RN的歡迎界面

Snip20170814_2.png

接下來我們看下 Stack Navigator 的簡單用法

import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

當前控制器的title我們可以在navigationOptions中設置,其實title不僅僅可以使用文字,我們還可以自定義組件顯示,接著往下看

創建一個新的界面,實現跳轉

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

我們可以在HomeScreen組件中添加一個button ,當點擊button的時候使用routeName Chat來跳轉到ChatScreen,

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

我們使用屏幕導航屬性navigate函數來跳轉到ChatScreen
我們在 HomeScreen 組件下加上以下代碼就可以實現跳轉了

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

傳遞參數

我們可以在navigate中傳遞參數

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

我們可以在他的下級界面中得到參數 navigationOptions

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

進階,修改導航條的樣式

我們這么修改

static navigationOptions = {
        title:'商家后臺',
        headerStyle:{
            backgroundColor:'#00a0e9'
        },
        headerTintColor:'white',
    }

效果看起來是這樣的(注意導航條)

Simulator Screen Shot 2017年8月14日 18.13.42.png

對于這樣的效果我們可以這么設置

Simulator Screen Shot 2017年8月14日 18.52.49.png

 static navigationOptions = ({navigation}) => ({
        title : '收藏的商家',
        headerStyle:{
            backgroundColor:'white'
        },
        
        headerBackTitleStyle:{
            color:'#666666',

        },

        headerLeft:( // 設置左邊的標簽
            <TouchableOpacity onPress={()=>{navigation.goBack()}}>
                <View style={{flexDirection:'row',alignItems:'center',marginLeft:5}}>
                    <Image style={{height: 18,width:10,marginRight:5}} source={{uri:'back'}}/>
                    <Text style={{color: '#999',fontSize:15}}>返回</Text>
                </View>

            </TouchableOpacity>
        ),
        headerRight:( // 設置右邊的標簽
            <TouchableOpacity onPress={()=>{navigation.goBack()}}>
                <View style={{flexDirection:'row',alignItems:'center',marginRight:8}}>
                    <Image style={{height: 18,width:18,resizeMode:'contain'}} source={{uri:'new_del'}}/>
                </View>

            </TouchableOpacity>
        ),
        headerTitle:(//設置頭部標簽
            <TouchableOpacity onPress={()=>{navigation.goBack()}}>
                <View style={{flexDirection:'row',alignItems:'center',marginRight:8}}>
                    <Image style={{height: 40,width:40,resizeMode:'contain'}} source={{uri:'znb 2'}}/>
                </View>

            </TouchableOpacity>
        )



    });