【滴水石穿】rn

这个项目还不错，还比较全

先放项目地址：https://github.com/ShionHXC/rn

项目算是一个完整的APP

有用到redux-thunk存储数据，算的上是一个普通的比较完整的APP



别的里面就是一些页面

//index.js
//根index.js引用的是AppNavigator
/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import { AppRegistry } from 'react-native'
import AppNavigator from './js/navigator/AppNavigator'
import { name as appName } from './app.json'

AppRegistry.registerComponent(appName, () => AppNavigator)

app.js是没有使用的

分析项目目录



我们来看代码

//这个基本上定义了最热页面的所有东西
import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer
} from 'react-navigation'
//loading页面
import WelcomePage from './../page/WelcomePage'
//
import HomePage from './../page/HomePage'
import DetailPage from './../page/DetailPage'
import FetchDemoPage from './../page/FetchDemoPage'
import AsyncStorageDemoPage from './../page/AsyncStorageDemoPage'
import DataStoreDemoPage from './../page/DataStoreDemoPage'
const InitNavigator = createStackNavigator({
    WelcomePage: {
        screen: WelcomePage,
        navigationOptions: {
            header: null
        }
    }
})

const MainNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            header: null
        }
    },
    DetailPage: {
        screen: DetailPage,
        navigationOptions: {
            // header: null
        }
    },
    FetchDemoPage: {
        screen: FetchDemoPage,
        navigationOptions: {}
    },
    AsyncStorageDemoPage: {
        screen: AsyncStorageDemoPage,
        navigationOptions: {}
    },
    DataStoreDemoPage: {
        screen: DataStoreDemoPage,
        navigationOptions: {}
    }
})

export default createAppContainer(
    createSwitchNavigator(
        {
            Init: InitNavigator,
            Main: MainNavigator
        },
        {
            defaultNavigationOptions: {
                header: null
            }
        }
    )
)

//这个里面定义的是全局导航
//js/navigator/NavigationUtil.js
/*
    全局导航控制类
*/

export default class NavigationUtil {
    /**
     * 返回上一页
     *
     * @static
     * @param {*} navigation
     * @memberof NavigationUtil
     */
    static goBackTo(navigation) {
        navigation.goBack()
    }
    /**
     * 跳转到首页
     * @static
     * @param {*} params
     * @memberof NavigationUtil
     */
    static resetToHomePage(params) {
        const { navigation } = params
        navigation.navigate('Main')
    }
    /**
     * 跳转到指定页面并传递页面参数
     *
     * @static
     * @param {*} page
     * @param {*} params
     * @memberof NavigationUtil
     */
    static goPage(page, params) {
        const navigation = NavigationUtil.navigation
        if (!navigation) {
            console.warn('Navigation can be null')
            return
        }
        navigation.navigate(page, { ...params })
    }
}

这个项目写的好复杂啊～