如何在 react-native 中的其他组件前面制作自动完成列表？答案

【问题标题】：How to make autocomplete list in front of other components in react-native?如何在 react-native 中的其他组件前面制作自动完成列表？
【发布时间】：2018-02-09 13:31:33
【问题描述】：

我使用 RootForm 作为表单页面的基本模板。有一个与位置自动完成相关联的字段，所以我包装了 react-native 的本机自动完成并在该字段中使用它。但是，自动完成下拉列表被表单中呈现在其后面的其他字段阻止。我尝试在网上搜索，但没有有用的材料。使用 modal 或 zIndex 不是这里的解决方案。即使它比其他组件更早呈现，我如何才能在其他组件的顶部制作下拉列表？

以下两个 sn-ps 是我的 rootform 和自动完成渲染函数。

  render() {
    const { input } = this.state;
    const cities = this.state.cities;

    return (

      <View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={cities}
          defaultValue={input}
          onChangeText={text => this.setState({ input: text })}
          placeholder="Enter Location"
          renderItem={({ cityName, cityId }) => (
            <TouchableOpacity style={styles.listStyle} onPress={() => this.setState({ input: cityName, cities: [] })}>
              <Text style={styles.itemText}>
                {cityName}
              </Text>
            </TouchableOpacity>
          )}
        />

      </View>

    );
  }

    render() {
        const data = this.props.data;
        let fields = [];
        let onPress = null;
        Object.keys(data).forEach((key, index) => {
            let options = data[key].options ?
                data[key].options : null

            if ("type" in data[key]) {
                    fields.push(
                        <View style={styles.formField} key={key}>
                            <Text style={styles.text}>{data[key].label}</Text>
                            <AutoComplete />
                        </View>
                    )
            } else {
                let custom = [styles.formField];
                if (options) {
                    fields.push(
                        <View style={custom} key={key}>
                            <Text style={styles.text}>{data[key].label}</Text>
                            <TextInput value={data[key].value} style={styles.input}
                                readOnly
                                {...options} />
                        </View>
                    )
                } else {
                    fields.push(
                        <View style={custom} key={key}>
                            <Text style={styles.text}>{data[key].label}</Text>
                            <TextInput value={data[key].value} style={styles.input}
                                onChangeText={(text) => this.props.onFieldChange(key, text)}
                                {...options} />
                        </View>
                    );
                }
            }
        })
        return (
            <KeyboardAwareScrollView style={styles.container}>
                {fields}
            </KeyboardAwareScrollView>
        )
    }

【问题讨论】：

尝试响应门户
@Maolei Tang 你有什么解决办法吗？我在自动标记中也面临同样的问题。我的下拉列表显示在键盘后面。你有什么解决办法吗

标签： reactjs react-native autocomplete

【解决方案1】：

您可以更改您的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>
)}

每当用户使用自动完成组件时，这会将列表置于顶部。最后要做的是确保在用户不再使用它时将其推到后面。

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

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

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

【讨论】：