【问题标题】:In React Native, is it possible to call onPress while keyboard open [duplicate]在 React Native 中,是否可以在键盘打开时调用 onPress [重复]
【发布时间】:2018-09-24 23:21:53
【问题描述】:

用户需要在FlatList 项目上单击两次,因为autoFocus={true}<TextInput。第一次单击键盘隐藏,然后单击调用onPress={this.GetItem.bind(this, item)}。是否有任何选项可以在第一次单击时调用 GetItem() 而不是单击两次。

演示:https://snack.expo.io/ByJ_yWehM

export default class App extends Component {
  GetItem (item) {
    console.log(item);
    Alert.alert(item);
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          autoFocus={true}
          style={styles.paragraph}
          keyboardType='web-search'
        >
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url.
        </TextInput>
        <Card title="Local Modules">
          <View>
            <TextInput
              style={styles.searchField}
              placeholder="Type here to translate!"
              onChangeText={(text) => this.setState({text})}
            />

            <FlatList
                data={["akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate","akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate"]}
                renderItem={({item}) => (
                  <Text
                    style={styles.listField}
                    onPress={this.GetItem.bind(this, item)}
                    >{item}</Text>
                )}
              />
          </View>
        </Card>
      </View>
    );
  }
}

该组件的目的是当用户在&lt;TextInput&gt; 中搜索时在&lt;FlatList&gt; 中给出自动建议

【问题讨论】:

  • 不完全是您正在寻找的答案,但是,keyboad events 对您有帮助吗?
  • @bennygenel 该组件的目的是当用户在&lt;TextInput&gt; 中搜索时,在&lt;FlatList&gt; 中给出自动建议

标签: javascript reactjs react-native react-native-ios react-native-flatlist


【解决方案1】:

keyboardShouldPersistTaps='handled' 添加到您的FlatList 将防止键盘被关闭onPress

<FlatList
    keyboardShouldPersistTaps='handled'
    data={["akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate","akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate"]}
    renderItem={({item}) => (
      <Text
        onPress={this.GetItem.bind(this, item)}
        >{item}</Text>
    )}
/>

always 也可用作 keyboardShouldPersistTaps 值。

Official doc for keyboardShouldPersistTaps here

【讨论】:

  • 很好的答案。此属性未记录在 FlatList 组件中,仅适用于 ScrollView
猜你喜欢
  • 1970-01-01
  • 2017-09-01
  • 2020-10-05
  • 2023-03-22
  • 1970-01-01
  • 2016-11-11
  • 2021-12-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多