Question

我正在为一个项目制作一个小的Twitter墙原型，并且遇到了一个奇怪的问题。我具有以下视图结构：

<Animated.View style={[{flex: 1}, {marginBottom: this.bottomOffset}]}>

  <FlatList 
  ...
  keyboardDismissMode="on-drag"
  keyboardShouldPersistTaps="always"
  ... />                

  <View style={{
     flexDirection: "row", 
     alignItems: "center", 
     minHeight: 44, 
     backgroundColor: "#cccccc"}}>

     <Octicons />

     <TextInput 
         enablesReturnKeyAutomatically={true}
         multiline={true}
         onChangeText={(text) => this.setState({text: text})} 
         value={this.state.text} 
     />

    <Octicons
         name="diff-renamed" 
         backgroundColor="transparent"
         color="black"
         style={styles.icon}
         size={24}                         
         onPress={this._handlePost} 
    />
 </View>
</Animated.View>

其中

_handlePost = (e) => {
    // todo: networking
    this.setState({
        text: ""
    });
}

为了简化代码并使代码易于阅读，我缩短了部分代码。

问题是，当TextInput具有焦点时，其他Touchable都不会接收onPress事件。一旦TextInput失去焦点，所有其他组件都将收到onPress事件。

仅供参考：在调用onPress回调（在我的情况下为 _handlePost ）中，TextInput将被清除。

请参见video。

我做错了什么？

Answer 1

您是否试图通过将其声明为ScrollView来将点击事件持久化在父容器上，例如：

<Animated.ScrollView
  style={[{flex: 1}, {marginBottom: this.bottomOffset}]}
  keyboardShouldPersistTaps={'always'}
>
  ...
  <View style={{
    flexDirection: "row", 
    alignItems: "center", 
    minHeight: 44, 
    backgroundColor: "#cccccc"}}
  >
    ...
  </View>
  ...
</Animated.ScrollView>

Answer 2

我想您是从react-native-vector-icons或expo导入Octicons的，对吗？如果是这种情况，则它们不支持onPress方法（至少根据文档而言）。尝试用Touchable包装它。

TextInput处于焦点状态时，按钮不接收onPress事件

2 个答案: