Snapchat как горизонтальный ScrollView в сочетании с быстрой навигацией

Question

Я пытаюсь создать ScrollView, похожий на интерфейс Snapchat, с 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 отобразит все 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

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 />
    )
  }
}