在TextInput中有焦点时无法点击SectionList的ListItem

问题描述：

问题：我有一个包含TextInput和SectionList的页面。当我关注TextInput，然后单击SectionList中的ListItem时 - 它只隐藏键盘，但不会导航到SecondPage，它应该执行onPress，如下所示。如果TextInput未聚焦 - 一切正常。在TextInput中有焦点时无法点击SectionList的ListItem

期望的行为：在关注TextInput的同时，如果点击ListItem，它应该导航到第二页。

问题：
1.我的代码有问题吗？或者这是SectionList的正常行为？
2.有没有办法达到理想的行为？

代码：

SectionList + TextInput组件

const ds = [ 
     { data: [ {word: 'BMW'}, {word: 'Mercedez'}, {word: 'Tesla'}], title: 'Cars' }, 
     { data: [{word: 'Finland'}, {word: 'USA'}, {word: 'Somalia'}], title: 'Countries' }, 
     { data: [{word: 'Water'}, {word: 'Coke'}, {word: 'Tea'}], title: 'Liquids' }, 
    ]; 

class FirstPage extends React.Component { 

render() { 
    return ( 
     <View> 
     <View style={{ flexDirection: 'row' }}> 
     <TextInput 
       onChangeText={(v) => this.setState({ text: v})} 
       style={{ borderWidth: 1, flex: 1 }} 
       value={this.state.text} 
      /> 
     </View> 
      <SectionList 
        renderItem={({ item }) => <ListItem word={item.word} navigation={this.props.navigation} />} 
        renderSectionHeader={({ section }) => <ListItem word={section.title} section/>} 
        sections={ds} 
        keyExtractor={(item) => item.word} 
       /> 
     </View> 
      ); 
} 
}

列表项组件

render() { 
     const { navigation, section, word } = this.props; 
     const { letterStyle, noteStyle, sectionStyle, termStyle } = styles; 
     if (section)  
     {  
      return (
      <TouchableOpacity>    
       <View> 
        <CardSection style={sectionStyle}> 
         <Text style={letterStyle}>{word}</Text> 
        </CardSection> 
       </View> 
      </TouchableOpacity> 
      ); 
     } 
     return (
      <TouchableOpacity 
       onPress={() => navigation.navigate('SecondPage')} 
      > 
       <View> 
        <CardSection style={sectionStyle}> 
         <Text numberOfLines={1} style={termStyle}>{word}</Text> 
        </CardSection> 
       </View> 
      </TouchableOpacity> 
      ); 
    }

此解决方案也适用于SectionLists：https://*.com/questions/36307853/touchableopacity-unclickable-while-textinput-has-focus/36332283#36332283 在此链接修改选定的答案以反映成功为SectionLists应用解决方案。 – Eduard

答

你试试这个：

onMenuPress(item){ 
    console.log(item); 
    this.props.navigation.navigate("some_route"); 
} 

render() { 
.....some code 
    <ListItem onPress={(item) => this.onMenuPress(item)}> 
....more code 
}

请记住，在构造函数上绑定onMenuPress方法，如下所示：

constructor(props){ 
    super(props); 
    this.onMenuPress = this.onMenuPress.bind(this); 
}

适用于我。

在TextInput中有焦点时无法点击SectionList的ListItem

相关推荐