【滴水石穿】rn

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

先放项目地址：/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 } = paramsnavigation.navigate('Main')}/*** 跳转到指定页面并传递页面参数** @static* @param {*} page* @param {*} params* @memberof NavigationUtil*/static goPage(page, params) {const navigation = NavigationUtil.navigationif (!navigation) {console.warn('Navigation can be null')return}navigation.navigate(page, { ...params })}}

这个项目写的好复杂啊～