如何在 React Native 中创建类似 html 的导航下拉菜单？答案

【问题标题】：How to create html-like navigation dropdown menu in React Native?如何在 React Native 中创建类似 html 的导航下拉菜单？
【发布时间】：2021-01-29 17:50:00
【问题描述】：

有没有办法像在 HTML 中使用 React Native 一样创建下拉导航菜单，其中下拉部分绝对位于菜单下方内容的顶部？

在没有绝对定位的情况下，下拉菜单的父元素（下图，蓝色背景）会增加其高度，而其他内容在下拉菜单下方。

当我在下拉列表中使用绝对位置时，它在第 1 项之上而不是在它之下，因为 React Natives 相对于父项定位绝对位置。

我的代码：

    <View style={{ flex: 1 }}>

      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline', backgroundColor: '#3763a4'}}>

        <View style={{ backgroundColor: '#FF0000', flex: 1 }}>

          <View style={{ padding: 10 }}>

            <Text style={{ color: '#FFFFFF' }}>Item 1</Text>

          </View>

          <View style={{ padding: 10 }}>

            <Text style={{ color: '#FFFFFF' }}>Item 1.1</Text>

            <Text style={{ color: '#FFFFFF' }}>Item 1.2</Text>

          </View>

        </View>

        <View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 2</Text></View>

        <View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 3</Text></View>

      </View>

      <WebView

        source={myHtml}

      />

    </View>

它的样子：

Webview 在此下方。相反，下拉菜单应位于 Web 视图的顶部。

绝对位置的样子：

我希望我的解释足够清楚。此图像和链接显示 HTML 导航菜单：https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

【问题讨论】：

你可以查看github代码akveo.github.io/react-native-ui-kitten/docs/components/…或者选择你想要的

标签： react-native drop-down-menu

【解决方案1】：

RN 中存在绝对位置：https://reactnative.dev/docs/layout-props#position，它的工作原理与 CSS 几乎相同。尝试调查！

【讨论】：

我已经试过了。在 CSS 中它是相对于元素的位置，但在 React Native 中它是相对于父元素的。这是一个巨大的差异。 React Native 文档说If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.。我不知道如何使用组件树来实现我想要的。
在 Windows 上，但这有什么不同吗？
我是说安卓模拟器？ React native 对 android 上的子视图有一些影响，当你在Item 1.1 Item1.2 菜单中添加绝对位置时，父视图会切断它吗？
我为 Windows 和 iOS 编写应用程序，而不是 Android。
好的，我知道了，我现在没有时间，如果今天没有人回答你，我明天会发给你如何在 RN 上实现下拉菜单。祝你好运！

【解决方案2】：

我找到了解决方案。我不得不将绝对定位的 View 包装在另一个 View 中，并添加 zIndex: 1 以将其定位在 Webview 的顶部。

代码：

<View style={{ flex: 1 }}>

                <View style={{ zIndex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline', backgroundColor: '#3763a4' }}>

                    <View style={{ backgroundColor: '#FF0000', flex: 1 }}>

                        <View style={{ padding: 10 }}>

                            <Text style={{ color: '#FFFFFF' }}>Item 1</Text>

                        </View>

                        <View>

                            <View style={{ backgroundColor: '#FF0000', padding: 10, position: 'absolute' }}>

                                <Text style={{ color: '#FFFFFF' }}>Item 1.1</Text>

                                <Text style={{ color: '#FFFFFF' }}>Item 1.2</Text>

                            </View>

                        </View>

                    </View>

                    <View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 2</Text></View>

                    <View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 3</Text></View>

                </View>

                <WebView

                    source={myHTML}

                />

</View>

结果：

【讨论】：