Javascript 在TextInput中具有焦点时，无法单击SectionList的ListItem

问题：我有一个带有文本输入和分区列表的页面。当我专注于文本输入，然后单击SectionList中的ListItem时，它只会隐藏键盘，而不会导航到SecondPage，按此键时应该这样做，如下图所示。如果文本输入未聚焦，则一切正常

期望的行为：当我关注文本输入时，如果我点击一个列表项，它会将我导航到第二个页面

问题: 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>
            );
    }

ListItem组件

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

你试过这个吗：

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

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

---

适用于我。

此解决方案也适用于分区列表：修改此链接中选定的答案，以反映分区列表解决方案的成功应用。