react native navigation

使用React Navigation进行跳转，主要有两个页面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 (
      
        Hello, this is Home!
         navigate('Chat', {user:'thinkreed'})} title='chat with reed'/>
      
    );
  }
}

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 (
      
        chat with {params.user}
      
    );
  }
}

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

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

// 注册应用(registerComponent)后才能正确渲染 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('DemoProject', () => SimpleApp);

效果如下

Screenshot_20170611-223544.png

Screenshot_20170611-223538.png