react-native入门(六)---导航相关以及界面之前传值

RN里面的导航是依赖三方库的，做的不错，官方推荐这个react-navigation

导入方式，在.package里面这样加入三方库名称

或者在根目录下输入 npm install --save react-navigation 即可

导入结果如下

"dependencies": {
    "@ant-design/react-native": "^3.1.5",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-image-crop-picker": "^0.24.1",
    "react": "16.8.6",
    "react-native": "0.60.5",
    "react-navigation": "^3.11.0"
  },

下面介绍下tabbar和navigation

tabbar和navigation

const Tabs = createBottomTabNavigator({
    HomePage: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首页',
            tabBarIcon: ({focused, tintColor}) => (
                <view/>
            )
        }
    },
    MinePage: {
        screen: Mine,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor}) => (
                <view/>
            )
        }
    },
}, {
    tabBarOptions: {
        style: {
            height: 49,
            backgroundColor: '#fff',
            paddingBottom: 22,
            paddingTop: 6,
            // paddingBottom: 4,
            borderTopWidth: 0,
            shadowOffset: {width: 0, height: 2},
            shadowOpacity: 0.2,
            shadowRadius: 4,
            shadowColor: 'black',
            elevation: 4,
        },
        inactiveTintColor: 'black',
        activeTintColor: 'blue'
    }
    tabBarComponent: props => <CustomTabbar {...props} /> //自定义相关
});

上面的可以理解为定义了一个tabbar控制器，Tab即为其控制器名称

页面栈(navigation),其形式为一个栈的形式，app启动时默认加载第一个标签，

let RootStack = createStackNavigator({
    TabsPage: {
        screen: HomePage,
        navigationOptions: {
            header: null
        }
    },
    MyInfo: {
        screen: MyInfo
    }
}, {
    defaultNavigationOptions: ({navigation}) => {
        const {
            state: {
                routeName
            }
        } = navigation

        return {
            gesturesEnabled: true,
            headerBackTitle: null,
            headerStyle: {
                backgroundColor: '#172435',
                borderBottomWidth: 0,
                elevation: 0
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                color: '#fff',
                fontSize: 24
            },
            headerLeft: (
                <TouchableOpacity
                    style={[
                        {
                            width: 60,
                            alignItems: 'center',
                            justifyContent: 'center'
                        },
                    ]}
                    onPress={() => {
                        const {
                            index
                        } = navigation.dangerouslyGetParent().state
                        if (index !== 0) {
                            navigation.pop()
                        } else {

                        }
                    }}
                >
                </TouchableOpacity>
            )
        }

    },
    transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })
});

对外声明页面栈，用于启动app

const App = createAppContainer(RootStack);

这样设置完毕即可尝试使用app了，设置完之前自己创建几个页面试试吧

导航之间的跳转和传值

按照上面设置完成页面栈之后

跳转push：（第一个参数为声明的页面名称， 第二个为传递的参数，为一个对象）

this.props.navigation.push('MyInfo', {item: myInfo})

注：若想回调传递一个callback回调即可

this.props.navigation.push('MyInfo', {
    callback: ()=>{
        //我是回调
    }
})

接收对象：(跳转后的页面,param为传递过来的参数)

let param = this.props.navigation.state.params

返回pop:

this.props.navigation.goback()

切换栈navigate：（用于切换栈，如果当前栈里面没有改页面会push进入一个页面，如果有页面会切换到前面指定的页面,上面的页面会被pop掉，也可以通过这个切换tabbar标签）

this.props.navigation.navigate('MyInfo')   

导航相关的就想介绍到这些了，详细的属性可以去react-navigation官网查看吆，更有助与理解