Reactjs 如何在react native中的其他组件前面创建自动完成列表？

我使用根表单作为表单页面的基本模板。有一个字段与location autocomplete关联，因此我将react native的本机autocomplete包装起来，并在该字段中使用它。但是，自动完成下拉列表会被表单中的其他字段阻止，这些字段在其后面呈现。我试图在网上搜索，但没有有用的资料。在这里，使用modal或zIndex不是解决方案。我如何才能使下拉列表位于其他组件的顶部，即使它比其他组件渲染得更早

以下两个片段是我的rootform和autocomplete呈现函数

render（）{
const{input}=this.state；
const cities=this.state.cities；
返回(
this.setState（{input:text}）}
占位符=“输入位置”
renderItem={（{cityName，cityId}）=>(
this.setState（{input:cityName，cities:[]}}>
{cityName}
)}
/>
);
}

您只需更改

style.container

即可，使其zIndex高于其顶部显示的任何内容。但是，这将使表单中的其他项显示在为下拉列表保留的区域后面，并使其不可选择

如果希望自动完成组件区域下的项目仍然是交互式/可选的，可以使用

React.useState

在组件上具有动态

zIndex

属性

const [componentZIndex, setComponentZIndex] = React.useState(1);

您希望为列表保留的区域后面的组件具有大于2的zIndex，以便它们是交互式的

然后，您需要呈现自己的输入组件，以便能够访问

onFocus

属性。幸运的是，您正在使用的库允许您执行以下操作：

renderTextInput={() => (
    <View style={styles.input}>
        <TextInput
            onFocus={() => setComponentZIndex(999)}
            value={value}
        />
    </View>
)}

---

试着反应portals@Maolei唐：你有什么解决办法吗。我在autotag也面临同样的问题。我的下拉列表显示在键盘后面。你有什么解决办法吗

React.useEffect(() => {
    Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

    return () => {
      Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
    };
  }, []);

  const _keyboardDidHide = () => {
    setComponentZIndex(1)
  };