类 Snapchat 的水平滚动视图结合 React 导航

Question

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

这适用于 react-native 版本：0.57.1，以及 react-navigation 版本：3.0.9。当我将所有 3 个屏幕直接放在 ScrollView 组件中时，这工作正常，但是我找不到 select 最初显示哪个屏幕的方法。

这与我的目标类似：

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

您可以利用 react-navigation 的 createMaterialTopTabNavigator 并使 tabBarComponent 无效，而不是使用 ScrollView。它默认启用滑动导航。

您还需要为 react-navigation 设置一个 app container，这就是错误的来源。 注意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 />
    )
  }
}