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

Question

有没有办法像 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 在此下方。相反，下拉菜单应该位于 Webview 的顶部。

绝对位置的样子：

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

Answer 1

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

Answer 2

我找到了解决办法。我不得不将绝对定位的视图包装在另一个视图中并添加 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>

结果：

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

How to create html-like navigation dropdown menu in React Native?

drop-down-menu

react-native