时间戳

首页 > 解决方案 > 带有 react-native 的 index.js 配置？

react-native - 带有 react-native 的 index.js 配置？

问题描述

我目前正在尝试在我的 RN 应用程序中实现反应导航。RN 文档似乎说 index.js 是 RN 项目的必需文件，但第一个 react-navigation 示例显示了 App.js 中的所有初始代码，没有 index.js 文件：

https://snack.expo.io/@react-navigation/auth-flow-v3

index.js 文件是否仅适用于非 Expo 构建的独立 RN 项目？也许世博会在幕后自动处理这个问题？我的独立 RN 应用程序似乎需要 index.js 文件，并且 index.js 中似乎也需要 render() 实现。问题似乎是我的 index.js 中的 render() 实现似乎覆盖了 App.js 中的任何内容。即，我期望 App.js 配置中的 initialRouteName: 'AuthLoading' 重定向到我的 AuthLoading 组件，但 App.js 逻辑似乎被 index.js render() 实现所取代。

那么让我的 index.js 和 App.js 支持 react-navigation 集成的正确方法是什么？我愿意放弃 index.js 以获得替代实现/配置，我只是在我的项目中使用它，因为我的理解是它是必需的。

标签： react-native

解决方案

我真的不明白你的困惑，但它仍然是这样的。

首先，您的 index.js 将完全正常。它必须看起来像这样或类似：

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

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

这很正常，对吧？然后，让我们看看它在 App.jsx 中会怎样

//App.jsx
import React, { Component } from 'react'
import AppContainer from './fromSomeRoute'//replace by your own

export default class App extends Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

究竟是什么AppContainer？只是您从用于反应导航的文件中导出的组件。在这里，不需要创建一个类或类似的东西，你可以像这样创建它

//fromSomeRoute.jsx
import React from 'react'
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
import YourScreen from './YourPathToYourScreen'

const YourScreenStack = createStackNavigator({
  YourScreen: {
    screen: YourScreen,
    navigationOptions: () => ({ //Look documentation for further info
      header: null,
    }),
  },
})

const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      Screen: YourScreenStack,
      //Create more Stacks and add them in here
    },
    {
      initialRouteName: 'Screen',
    },
  ),
)

export default AppContainer

推荐阅读