Проблема: у меня есть страница с TextInput и SectionList. Когда я фокусируюсь на TextInput, а затем нажимаю на ListItem в SectionList, он только скрывает клавиатуру, но не переходит на SecondPage, что он должен делать при нажатии, как вы можете видеть ниже. Если TextInput не сфокусирован - все работает нормально.
Желаемое поведение: если я сосредоточусь на TextInput, если я нажму на 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>
);
}
}
Компонент ListItem
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>
);
}