[React Native] React Navigation使用

1. Hello Mobile Navigation

Stack Navigator简介
基本导航栏样式如下；

1.png

代码如下所示：
![Uploading Simulator Screen Shot 2017年7月14日上午11.26.28_508132.png . . .]

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

export default class HomeScreen extends Component{
  static navigationOptions = {
    title: 'Welcome',
  };
  render(){
    return( 
      <View style={styles.container}> 
        <Text>Hello, world!</Text>
      </View>
    )
  }
}
//初始化导航栏
const SimpleApp = StackNavigator({
  Home: {screen: HomeScreen}
});

const styles = StyleSheet.create({
  container:{ 
    flex: 1, 
    paddingLeft: 10,
    paddingRight: 10,
  }  
})

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

界面跳转

2.png

3.png

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

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

export default class HomeScreen extends 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> 
    )
  }
}
const SimpleApp = StackNavigator({
  Home: {screen: HomeScreen},
  Chat: {screen: ChatScreen},
}); 

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

页面直接传递参数

export class ChatScreen extends Component { 
  static navigationOptions = ({ navigation }) => ({  
    title: 'Chat with ' + navigation.state.params.user,
  });
  render() {
    const {params} = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

export default class HomeScreen extends Component{
  static navigationOptions = {
    title: 'Welcome',
  };
  render(){
    const {navigate} = this.props.navigation;
    return( 
      <View> 
        <Text>Hello, Chat App!</Text>
        <Button 
          onPress={() => navigate('Chat', {user: 'huage'})}
          title='Chat with huage'
        />
      </View> 
    )
  }
}
const SimpleApp = StackNavigator({
  Home: {screen: HomeScreen},
  Chat: {screen: ChatScreen},
});

2. Tab Navigators

export class ChatScreen extends Component {  
  render() { 
    return (
      <View>
        <Text style={{marginTop:20}}>Chat with huage</Text>
      </View>
    );
  }
}

export default class HomeScreen extends Component{ 
  render(){ 
    return( 
      <View> 
        <Text style={{marginTop:20}}>Hello, Chat App!</Text> 
      </View> 
    )
  }
}
const SimpleApp = TabNavigator({
  Home: {screen: HomeScreen},
  Chat: {screen: ChatScreen},
}); 

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

[React Native] React Navigation使用

1. Hello Mobile Navigation

2. Tab Navigators

推荐阅读更多精彩内容