类似Snapchat的水平ScrollView与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无效。它默认启用了滑动导航。

你还需要为app container设置一个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 />
    )
  }
}