为了账号安全,请及时绑定邮箱和手机立即绑定

【React Native 极速指南】进阶篇

2019.05.07 12:34 430浏览

这篇文章你将会学习到:

  • 如何安装路由 react-navigation

  • 如何使用路由

    • 创建 StackNavigator

    • 页面间的转场和传递参数

    • 相关配置

    • TabNavigator

  • 其他通用组件

如何安装路由 react-navigation

  • yarn add react-navigation

  • Or npm install --save react-navigation

如何使用路由

创建 StackNavigator

  • 创建 Screen(View) 组件: Home

  • 创建 StackNavigator: NavigationContainer

    • 导入 createStackNavigator

    • 创建 NavigationRouteConfigMap

    • 创建 StackNavigatorConfig

  • 创建 App(React.Component)

    • 引用 Navigator

    • 渲染 StackNavigator

// home.jsimport React from 'react';import { View, Text } from 'react-native';export default class HomeScreen extends React.Component {
    render() {        return (            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}
// navigator.jsimport React from 'react';import { createStackNavigator } from 'react-navigation';import Home from './home';const NavigationRouteConfigMap = {    Home: {        screen: Home,        navigationOptions: {            header: null,            gesturesEnabled: false,
        },
    },
};const StackNavigatorConfig = {    initialRouteName: 'Home',
};export default createStackNavigator(NavigationRouteConfigMap, StackNavigatorConfig);
// app.jsimport React, { PureComponent } from 'react';import AppNavigator from './navigator';export default class App extends PureComponent {
    render() {        return <AppNavigator />;
    }
}
// index.jsimport {AppRegistry} from 'react-native';import App from './src/app';import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

页面间的转场和传递参数

  • 创建 Screen(View) 组件: Demo

  • 在页面上增加 Navigator

    • this.props.navigation.navigate('Demo', { test: 'hello'})

    • this.props.navigation.state.params

// demo.jsimport React from 'react';import { View, Text } from 'react-native';export default class DemoScreen extends React.Component {
    render() {        return (            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Demo Screen</Text>
            </View>
        );
    }
}
// navigator.js//...const NavigationRouteConfigMap = {    //...
    Demo: {
        screen: Demo,
        navigationOptions: {
            title: 'Demo'
        },
    },
};//...
// home.jsimport React from 'react';import { View, Text, Button } from 'react-native';export default class HomeScreen extends React.Component {
    render() {        return (            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button 
                    title="Go to Demo"
                    onPress={() => this.props.navigation.navigate('Demo', { test: 'hello' })}
                >                </Button>
            </View>
        );
    }
}

相关配置

TODO

TabNavigator

  • StackNavigatorConfig

    • headerTitleAllowFontScaling

    • headerStyle

    • headerLeft

    • headerRight

    • headerMode

    • initialRouteName

    • mode

    • cardStyle

    • navigationOptions

  • NavigationRouteConfigMap

    • title

    • left

    • right

    • screen

    • navigationOptions

TabNavigator

  • 创建 TabNavigator: NavigationContainer

    • 创建 NavigationRouteConfigMap

    • 创建 BottomTabNavigatorConfig

  • 在 StackNavigator 添加 TabNavigator

// tab.jsimport React from 'react';import { createBottomTabNavigator } from 'react-navigation';import Home from './home';import Demo2 from './demo2';const NavigatorTab = {    Home: {        screen: Home,        navigationOptions: {            tabBarLabel: 'Home',            showIcon: true,
        },
    },    Demo2: {        screen: Demo2,        navigationOptions: {            tabBarLabel: 'Demo',            showIcon: true,
        },
    },
};const TabOptions = {    animationEnabled: true,
};export default createBottomTabNavigator(NavigatorTab, TabOptions);
// navigator.js// ...const NavigationRouteConfigMap = {    // ...
    Tab: {
        screen: Tab,
        navigationOptions: {
            header: null,
            gesturesEnabled: false,
        },
    }
};const StackNavigatorConfig = {
    initialRouteName: 'Tab',
};export default createStackNavigator(NavigationRouteConfigMap, StackNavigatorConfig);

其他通用组件

  • 内置组件

    • Text, Button, View ...

    • StatusBar

    • RefreshControl

    • FlatList

  • 第三方组件

    • react-native-i18n

    • react-native-qrcode

    • react-native-splash-screen

    • react-native-svg-icon

    • react-native-svg

    • react-native-vector-icons

    • react-native-device-info

    • react-native-camera

    • react-native-swiper

    • react-native-root-toast

    • awesome-react-native





点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消