0

我正在尝试创建一个ScrollView类似于 Snapchat 的前端，带有 3 个屏幕。但是，我希望能够使用react-navigation' 设置初始路线的能力，以便每次加载主屏幕时，它都会从中间屏幕而不是最左侧的屏幕开始。

这是针对react-nativeversion:0.57.1和react-navigationversion:3.0.9的。当我将所有 3 个屏幕直接放在组件中时，这很好用ScrollView，但是我找不到选择最初显示哪个屏幕的方法。

这与我的目标相似：

const HomeScreenStack = createStackNavigator({
    Goals: GoalsScreen,
    Dash: DashScreen,
    Plans: PlansScreen,
}, {
    initialRouteName: "Dash"
})

class HomeScreen extends React.Component {
    render() {
        return (
            <ScrollView
                horizontal={true}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={true}>
                <HomeScreenStack />
            </ScrollView>
        )
    }
}

我希望HomeScreenStack在 a 中显示所有 3 条路线ScrollView，但我收到一条错误消息：

Invariant Violation: Invariant Violation:
The navigation prop is missing for this navigator.
In react-navigation 3 you must set up your app container directly.
More info: https://reactnavigation.org/docs/en/app-containers.html
4

1 回答 1

1

而不是使用 a ScrollView，您可以利用react-navigation'screateMaterialTopTabNavigator并取消tabBarComponent. 它默认启用滑动导航。

您还需要为 设置一个应用程序容器，react-navigation这是该错误的来源。 请注意，它AppContainer只能在主入口点文件中使用一次，例如App.js.

import { createAppContainer, createMaterialTopTabNavigator } from 'react-navigation'

const HomeNavigator = createMaterialTopTabNavigator(
  {
    Goals: GoalsScreen,
    Dash: DashScreen,
    Plans: PlansScreen,
  },
  {
    initialRouteName: "Dash",
    tabBarComponent: null
  }
)

const AppContainer = createAppContainer(HomeNavigator)

class HomeScreen extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}
于 2019-03-26T18:07:59.197 回答