Question

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

以下两个片段是我的rootform和自动完成渲染功能。

＆＃13;

  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>

    );
  }

＆＃13;

    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>
        )
    }

＆＃13;

Answer 1

您只需将style.container更改为具有比其顶部显示的zIndex高的zIndex。但是，这会将表单中的其他项目显示在为下拉列表保留的区域的后面，并使它们无法选择。

如果您希望自动完成组件区域下的项目仍然是交互式/可选的，则可以使用React.useState来在组件上具有动态zIndex属性。

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

您将希望为列表保留的区域后面的组件的zIndex大于2，以便它们可以交互。

然后，您将要呈现自己的输入组件，以便可以访问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)
  };

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

1 个答案: