Question

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

这是针对react-native版本：0.57.1和react-navigation版本：3.0.9。当我将所有三个屏幕直接放置在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的{{3}}来代替react-navigation，并使tabBarComponent无效。默认情况下，它已启用滑动导航。

您还需要为react-navigation设置一个createMaterialTopTabNavigator，这就是错误出处。 请注意，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 />
    )
  }
}

类似于Snapchat的水平ScrollView与React导航相结合

1 个答案: