Question

我已经解决这个问题了几个星期了，这让我发疯了。

基本上，我有一个嵌套表单的Modal组件。表单是一堆TextInput组件，是所有组件的核心。表单中的组件之一是React Native Autocomplete Input中的Autocomplete。问题是我可以将Autocomplete中的结果列表放在其他所有内容的前面，但是我的触摸会直接通过容器，并专注于结果列表后面的TextInput。我无法更改组件的顺序，因此不能仅将这一输入置于其他所有内容之后。

表单的一般设置如下：

<Modal>
 <TouchableWithoutFeedback>
   <View style={containerStyle}>
    <TouchableWithoutFeedback>
     <View>
       <CardSection style={sectionStyle}>
          <Input
            ...props...
          />
        </CardSection>

        <CardSection style={acSectionStyle}>
          <Text style={labelStyle}>Brand *</Text>
            <View style={acContainerStyle}>
            <Autocomplete
              autoCapitalize='none'
              autoCorrect={false}
              listStyle={acListStyle}
              data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
              defaultValue={query}
              onChangeText={text => this.setState({ query: text })}
              renderItem={this.renderItem.bind(this)}
              hideResults={this.state.hideResults ? this.state.hideResults : undefined}
              onBlur={() => this.setState({ hideResults: true })}
              onFocus={() => this.setState({ hideResults: false })}
            />
          </View>
        </CardSection>

        <CardSection style={sectionStyle}>
          <Input
           ...props...
          />
        </CardSection>
   </View>
   </TouchableWithoutFeedback>
  </View>
 </TouchableWithoutFeedback>
</Modal>

我必须堆叠TouchableWithoutFeedback组件才能使模式起作用。组件中还有更多道具，但我只保留了相关内容。

我的renderItem方法是：

renderItem(brand) {
    return (
      <TouchableOpacity
        style={{ width: '100%', height: 25 }}
        onPress={() => {
          this.setState({ pBrand: brand.trim(), query: brand.trim() });
        }}
      >
        <Text style={styles.listItemStyle}>{brand}</Text>
      </TouchableOpacity>
    );
  }

我不认为这是样式问题，但是我添加了处理zIndex的样式，以防万一：

containerStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    position: 'relative',
    flex: 1,
    justifyContent: 'center',
    zIndex: 1
  },
acSectionStyle: {
    justifyContent: 'center',
    zIndex: 2,
    height: 40
  },
  acContainerStyle: {
    right: 0,
    width: '75%',
    flex: 1,
    position: 'absolute',
    zIndex: 2
  }

keyboardShouldPersistTaps的默认Autocomplete是always。我所见过的所有问题都建议设置更高的zIndex（这不是问题-我可以看到该列表，但是如果我轻按它，轻按会通过到其后面的TextInput），更改组件的顺序（我无法执行），将onStartShouldSetResponderCapture设置为true（无效），或弄乱{{ 3}}，但没有一个起作用。我正在使用实际的Android设备React Native V0.57.1，并且该项目是使用Expo构建的。

最后，我已经录制了一个有关我的问题的小演示。当光标再次出现时，即是我单击结果。

Pointer Events

有什么我想念的吗？我只在React Native上写了几个月书，所以这绝对有可能。我来自Web开发背景，因此我认为，如果某个组件位于最上层（感谢zIndex），那么我将能够轻按它，而默认情况下不会通过它。

编辑：在弄乱时，如果我将acSectionStyle的高度更改为足以容纳下拉菜单的高度，则该下拉菜单将按应有的方式工作。当同级CardSection被覆盖时，就会出现问题。另一个CardSection优先。

Answer 1

因此，我终于找到了解决方法。不管它是否正确（我认为它不是正确的），至少它能起作用！我最终将Autocomplete组件（及其视图）带到了CardSection之外，但仍将标签留在了其中，就像这样：

<CardSection style={acSectionStyle}>
          <Text style={labelStyle}>Brand *</Text>
        </CardSection>
        <View style={acContainerStyle}>
            <Autocomplete
              autoCorrect={false}
              listStyle={acListStyle}
              // Text input container
              inputContainerStyle={acTextContainerStyle}
              style={acTextStyle}
              placeholder='China Glaze'
              data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
              defaultValue={query}
              onChangeText={text => this.setState({ query: text })}
              renderItem={this.renderItem.bind(this)}
              hideResults={this.state.hideResults ? this.state.hideResults : undefined}
              onBlur={() => this.setState({ hideResults: true })}
              onFocus={() => this.setState({ hideResults: false })}
            />
          </View>

然后，这就是我认为是错误的部分，我只是使用absolute定位的视图播放，直到将其向下移动足够远以在标签旁边对齐为止。

 labelStyle: {
    fontSize: 18,
    paddingLeft: 20,
    flex: 1
  },
 acContainerStyle: {
    right: 0,
    top: 102,
    width: '72%',
    flex: 1,
    position: 'absolute',
    zIndex: 10
  }

如果有人有更好的解决方案，我会爱，但这是我能想到的最好的方法。我试图避免仅出于缩放目的而移动具有硬编码值的视图，但这似乎是唯一的选择。

React Native自动完成输入结果列表忽略触摸

1 个答案: