Question

我试图创建一个React Native应用程序，其中标题左侧有一个菜单按钮，点击该按钮会导致实际屏幕顶部的菜单切换。该菜单下是每个单独屏幕的内容。我正在尝试制作该应用程序，以便多个屏幕都共享此结构，并且您可以通过可切换菜单在它们之间跳转。

我现在具有屏幕渲染功能的基本结构如下：

<View>
    { showMenu && (
        menuLinks.map((link) => {
            return (
                <View>
                    <TouchableOpacity
                        onPress={() => {/* Go to another screen. */}}
                    >
                        <Text>{link.label}</Text>
                    </TouchableOpacity>
                </View>
            );
        })
    )}
    <ScrollView>
        {/* Actual screen content here. */}
    </ScrollView>
</View>

然后在render函数下方，标题左侧的菜单按钮有以下几种内容：

screen.navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;

    return {
        headerLeft: () => {
            return (
                <TouchableOpacity
                    onPress={params.toggleMenu}
                >
                    <Text>Menu</Text>
                </TouchableOpacity>
            );
        }
    };
};

toggleMenu方法只是一种切换showMenu状态变量的方法。

我感到困惑的是构建应用程序的最佳方法。这里有一些可能性：

1）将菜单navigationOptions等（即不属于实际屏幕的所有内容）放入组件，然后在每个屏幕上包含该组件，并使用props.children实际包含页面内容。本质上，每个屏幕都将具有如下所示的渲染功能：

<ContainerComponent>
    {/* Actual screen content here. */}
</ContainerComponent>

我尝试使用此方法时遇到的一个“问题”是，通过将navigationOptions放在ContainerComponent中，实际上并没有在标题的左侧获得菜单按钮（我没有不知道为什么；也许很容易解决）。

2）我的另一个想法是使容器成为实际的屏幕，然后使用该屏幕通过传递一个screen变量和一些switch语句有条件地加载该屏幕来加载所有其他屏幕。屏幕内容。当我进行测试时，我没有遇到navigationOptions问题（换句话说，我有了菜单按钮，它可以正常工作），但是我觉得这有点草率，感觉怪异的是在屏幕上只有一个屏幕整个应用程序随后会加载所有其他屏幕（尽管这可能是正常现象；不知道）。

3）我的第三个想法是将菜单和navigationOptions提取到单独的组件中，然后将它们导入到每个屏幕上，尽管感觉有些重复。

所以我正在寻找一些建议：我应该执行上面的选项＃1，＃2或＃3，还是我没有想到的甚至还有更多的逻辑选项＃4？非常感谢。

用共享导航构建一组React Native屏幕的最佳方法是什么？

0 个答案: