类似Snapchat的水平滚动视图与React Navigation相结合

Question

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

这适用于react-native版本：0.57.1 ，react-navigation版本：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显示ScrollView内的所有 3 条路由，但我收到一个错误说：

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

Answer 1

与其使用ScrollView，不如利用react-navigation的createMaterialTopTabNavigator来取消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 />
    )
  }
}