第二章 React-Native react-navigatio

2019-06-25  本文已影响0人  读书的鱼

2-1 安装react-navigation

yarn add react-navigation
//or
npm install react-navigation -S

2-2 安装react-native-gesture-handler

yarn add react-native-gesture-handler
//or

npm install react-native-gesture-handler -S

因为这个插件包含native的代码所以我们需要执行一下，下面这段代码（让他关联到我们react-native项目里面）：

react-native link react-native-gesture-handler

2-3 具体的演示操作

具体代码：git@github.com:fx35792/react_native_study.git 在分支createStackNavigator
在搭建好的项目下面，我们要创建几个文件分别是：
navigators/AppNavigators.js
Pages/Login.js
Pages/HomePage.js
pages/Page1.js
pages/Page2.js
pages/Page3.js
pages/Page4.js
pages/Page5.js

2-4 createStackNavigator

提供APP屏幕之间切换的能力，它是以栈的形式还管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部。
屏幕转场风格:
默认情况下，createStackNavigator提供了转场过渡效果，在Android和iOS上过渡效果是不同的，这也是React Native重平台性的一个体现，在Android上从屏幕底部淡入，在iOS上是从屏幕的右侧划入，当然你也可以通过配置让StackNavigator支持屏幕从底部滑入的效果。

2-5 createStackNavigator API

createStackNavigator(RouteConfigs, StackNavigatorConfig):

从createStackNavigator API上可以看出createStackNavigator支持通过RouteConfigs和 StackNavigatorConfig两个参数来创建createStackNavigator导航器。

RouteConfigs

RouteConfigs支持三个参数screen、path以及navigationOptions；

StackNavigatorConfig

从react-navigation源码中可以看出StackNavigatorConfig支持配置的参数有10个。

function createStackNavigator(routeConfigMap, stackConfig = {}) {
  const {
    initialRouteKey,
    initialRouteName,
    initialRouteParams,
    paths,
    navigationOptions,
    disableKeyboardHandling,
    getCustomActionCreators
  } = stackConfig;
  ...

这7个参数可以根据作用不同分为路由配置、视图样式配置两类，首先看用于路由配置的参数：

用于路由配置的参数：

用于导航样式配置的参数：

####### navigationOptions（屏幕导航选项）

支持一下参数：

【案例】使用StackNavigator做界面导航、配置navigationOptions
StackNavigator
第一步：创建一个StackNavigator类型的导航器
export const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}页面名`//动态设置navigationOptions
        })
    },
    Page2: {
        screen: Page2,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "This is Page2.",
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在这里定义每个页面的导航属性，动态配置
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : 'This is Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '编辑'}
                        onPress={() =>
                            setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
                    />
                ),
            }
        }
    },
}, {
    defaultNavigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});
第二步：配置navigationOptions：

步骤一的代码中通过两种方式配值了navigationOptions：

静态配置：

对Page2的navigationOptions配置是通过静态配置完成的：

Page2: {
    screen: Page2,
    navigationOptions: {//在这里定义每个页面的导航属性，静态配置
        title: "This is Page2.",
    }
},

这种方式被称为静态配置，因为navigationOptions中的参数是直接Hard Code的不依赖于变量。

动态配置：

对Page3的navigationOptions配置是通过动态配置完成的：

Page3: {
    screen: Page3,
    navigationOptions: (props) => {//在这里定义每个页面的导航属性，动态配置
        const {navigation} = props;
        const {state, setParams} = navigation;
        const {params} = state;
        return {
            title: params.title ? params.title : 'This is Page3',
            headerRight: (
                <Button
                    title={params.mode === 'edit' ? '保存' : '编辑'}
                    onPress={() =>
                        setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
                />
            ),
        }
    }
},

从上述代码中可以看出Page3的navigationOptions依赖于props这个变量所以是动态的，当props中的内容发生变化时，navigationOptions也会跟着变化；

提示：除了在创建createStackNavigator时配置navigationOptions外，在StackNavigator之外也可以配置navigationOptions；

createStackNavigator之外也可以配置navigationOptions

// 方式一：
Page2.navigationOptions = {
     title: "This is Page2.",
};


// 方式二：
export default class Page1 extends React.Component {
    //也可在这里定义每个页面的导航属性，这里的定义会覆盖掉别处的定义
    static navigationOptions = {
        title: 'Page1',
    };
    ...
第三步：界面跳转
export default class HomePage extends React.Component {
    //在这里定义每个页面的导航属性
    static navigationOptions = {
        title: 'Home',
        headerBackTitle:'返回哈哈',//设置返回此页面的返回按钮文案，有长度限制
    }

    render() {
        const {navigation} = this.props;
        return <View style=>
            <Text style={styles.text}>欢迎来到HomePage</Text>
            <Button
                title="Go To Page1"
                onPress={() => {
                    navigation.navigate('Page1', {name: '动态的'});
                }}
            />
            <Button
                title="Go To Page2"
                onPress={() => {
                    navigation.navigate('Page2');
                }}
            />
            <Button
                title="Go To Page3"
                onPress={() => {
                    navigation.navigate('Page3',{ name: 'Devio' });
                }}
            />
        </View>
    }
}

页面跳转可分为两步：

第四步：更新页面Params与返回
export default class Page3 extends React.Component {
    render() {
        const {navigation} = this.props;
        const {state, setParams} = navigation;
        const {params} = state;
        const showText = params.mode === 'edit' ? '正在编辑' : '编辑完成';
        return <View style=>
            <Text style={styles.text}>欢迎来到Page3</Text>
            <Text style={styles.showText}>{showText}</Text>
            <TextInput
                style={styles.input}
                onChangeText={text=>{
                    setParams({title:text})
                }}
            />
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
        </View>
    }
}

在上述代码中通过：

 <TextInput
    style={styles.input}
    onChangeText={text=>{
        setParams({title:text})
    }}
/>

将输入框中内容的变化，通过setParams({title:text})更新到页面的标题上，你会看到当输入框中内容发生变化时，标题也会跟着变。

当用户单击Go Back按钮时，通过：

navigation.goBack();//实现了返回上一页
上一篇 下一篇

猜你喜欢

热点阅读