*2.RN页面跳转19-11-06

1.创建页面

屏幕快照 2019-11-06 21.48.46.png

具体代码：
HomePage.js

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

export default class HomePage extends React.Component {
  //在这里定义导航属性
  static navigationOptions = {
    title: 'Home',
    headerBackTitle:'返回标题'//文字限制长度，安卓不支持
  };
  render(){
    const {navigation} = this.props;
    return <View style={{flex:1,backgroundColor:'gary',paddingTop: 88}}>
      <Text style={styles.text}> page1</Text>
      <Button title={'Go Back'} onPress={()=>{
        navigation.goBack()
      }}/>
      <Button title={'to Page1'} onPress={()=>{
         navigation.navigate('Page1');
      }}/>

    </View>
  }
}
const styles = StyleSheet.create({
  text:{
    fontSize: 20,
    color: 'white'
  }
});

Page1

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

export default class Page1 extends React.Component {
  render(){
    const {navigation} = this.props;
    return <View style={{flex:1,backgroundColor:'gary',paddingTop: 88}}>
      <Text style={styles.text}>欢迎来page1</Text>
      <Button title={'Go Back'} onPress={()=>{
        navigation.goBack()
      }}/>
      <Button title={'to Page2'} onPress={()=>{
         navigation.navigate('Page2');
      }}/>
      <Button title={'to Page3'} onPress={()=>{
        navigation.navigate('Page3');
      }}/>
      <Button title={'to Page4'} onPress={()=>{
        navigation.navigate('Page4');
      }}/>
    </View>
  }
}
const styles = StyleSheet.create({
  text:{
    fontSize: 20,
    color: 'white'
  }
});

Page2

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

export default class Page2 extends React.Component {
  render(){
    const {navigation} = this.props;
    return <View style={{flex:1,backgroundColor:'gary',paddingTop: 88}}>
      <Text style={styles.text}> page1</Text>
      <Button title={'Go Back'} onPress={()=>{
        navigation.goBack()
      }}/>
      <Button title={'Go Page1'} onPress={()=>{
         navigation.navigate('Page1');
      }}/>
    </View>
  }
}
const styles = StyleSheet.create({
  text:{
    fontSize: 20,
    color: 'white'
  }
});

Page3

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

export default class Page3 extends React.Component {
  render(){
    const {navigation} = this.props;
    return <View style={{flex:1,backgroundColor:'gary',paddingTop: 88}}>
      <Text style={styles.text}> page1</Text>
      <Button title={'Go Back'} onPress={()=>{
        navigation.goBack()
      }}/>
      <Button title={'Go Back'} onPress={()=>{
         navigation.navigate('Page1');
      }}/>
    </View>
  }
}
const styles = StyleSheet.create({
  text:{
    fontSize: 20,
    color: 'white'
  }
});

2.创建navigators

屏幕快照 2019-11-06 21.53.34.png

AppNavigator.js

import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import Page1 from '../page/Page1';
import Page2 from '../page/Page2';
import Page3 from '../page/Page3';
import HomePage from '../page/HomePage';

export const AppStackNavigator = createStackNavigator(
  {
    HomePage:{
       screen: HomePage
    },
    Page1: {
       screen: Page1
    },
    Page2: {
      screen: Page2,
      navigationOptions:{
        title:"Page2"
      }
    },
    Page3: {
      screen: Page3
    },
  },
  {
    defaultNavigationOptions: { //全局默认属性，对当前导航器的所有页面有效
    }
  }
);

3.别忘了在App.js中引用

import {AppStackNavigator} from './navigators/AppNavigator'
import {createAppContainer} from 'react-navigation';
export default createAppContainer(AppStackNavigator);