使用React Navigation進(jìn)行跳轉(zhuǎn)，主要有兩個(gè)頁面Home和Chat

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

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home'
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text>Hello, this is Home!</Text>
        <Button //用navigate跳轉(zhuǎn)到chat頁，傳入?yún)?shù){user:thinkreed}
          onPress= {() => navigate('Chat', {user:'thinkreed'})} title='chat with reed'/>
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({navigation}) => ({title: `Chat with ${navigation.state.params.user}`});
  render() {
    //傳入的{user:'thinkreed'}
    const {params} = this.props.navigation.state;
    return (
      <View style={styles.container}>
        <Text>chat with {params.user}</Text>
      </View>
    );
  }
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

// 注冊(cè)應(yīng)用(registerComponent)后才能正確渲染 注意：只把應(yīng)用作為一個(gè)整體注冊(cè)一次，而不是每個(gè)組件/模塊都注冊(cè)
AppRegistry.registerComponent('DemoProject', () => SimpleApp);

效果如下

Screenshot_20170611-223544.png

Screenshot_20170611-223538.png