react-native React Navigation跳转页面(StackNavigator)

react-native
React Navigation, 学习笔记

###React Navigation的导入配置

官方文档： 链接地址

导入的脚本为：
yarn add react-navigation

前置配置： yarn
npm install -g yarn react-native-cli

###StackNavigator使用记录

  1. 定义多个组件（记得导出）
  2. 创建并配置StackNavigator,使用createStackNavigator
  3. 跳转功能的调用this.props.navigation.navigate('组件名称')

具体测试代码：

  • App.js

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

import HomeScreen from './pages/homePage';
import MineScreen from './pages/minePage';

/**
 * 同一个JS中的组件Main
 */
class MainScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text>这是MainScreen!</Text>
                <Button
                  title='跳转到DetailScreen'
                  onPress={()=>{
                    this.props.navigation.navigate('Home') //点击事件定义-跳转到Home
                  }}
                />
            </View>
        );
    }
}

/**
 * 同一个JS中的组件Detail
 */
class DetailScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text>这是DetailsScreen!</Text>
                <Button
                  title='跳转到MainScreen'
                  onPress={()=>{
                    this.props.navigation.navigate('Main') //点击事件定义- 跳转到Main
                  }}
                />
            </View>
        );
    }
}

const RootStack = createStackNavigator ( //配置导航
  {
    Main: {
      screen:MainScreen
    },
    Home:{
      screen:HomeScreen
    },
    Mine:{
      screen:MineScreen
    },
    Detail:{
      screen:DetailScreen
    }
  },
  {
    initialRouteName:'Main', //设置初始页面
  }
  );

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#f3f3f6',
        alignItems: 'center',
        justifyContent:'center'

    }
});

type Props = {};
export default class App extends Component<Props>{
  render() {
    return <RootStack />; //引用导航配置
  }
}

  • HomePage.js（minePage.js相似）

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

/**
 * 不同JS文件的组件Home
 */
export default class HomeScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text>这是HomeScreen!</Text>
                <Button
                    title="返回到Main"
                    onPress = {()=>{
                        this.props.navigation.push('Home') //打开新的Home组件
                    }}
                />
                <Button
                    title="返回上一页"
                    onPress = {()=>{
                        this.props.navigation.goBack() //返回上一页
                    }}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#f3f3f6',
        alignItems: 'center',
        justifyContent:'center'
    }
});

####总结

  1. 通过createStackNavigator方法配置导航后，在app.js的render()中直接引用。配置中的组件就可以使用this.props.navigation进行跳转
  2. this.props.navigation.navigate('Home')，’Home’对应createStackNavigator中的key.
  3. navigate('Home')会先查找堆栈中是否存在’Home’界面，存在直接返回’Home’界面（旧的），不存在则开启新界面
  4. 一直开启新界面可以使用push('Home')
  5. this.props.navigation.goBack():返回上一页,与Android的返回按键关联

####技巧：

返回首页功能的两种实现方式：

  1. this.props.navigation.navigate('首页对应的key')
  2. this.props.navigation.popToTop()

参数传递:

  1. this.props.navigation.navigate('首页对应的key',{key:value,key2:value2})
  2. this.props.navigation.push('首页对应的key',{key:value,key2:value2})

参数接收：

const { navigation } = this.props;
const value = navigation.getParam('key', 'defValue');

END

–Nowy

–2018.10.30

分享到