如何添加到导出默认类extends组件- ({navigation})?

Question

我有一个问题，添加{navigation}参数到导出默认类extends组件，我需要它的FlatList

我如何在这里添加它?

export default class ENews extends Component {
render() {
return (
<View style={styles.main}>
<StatusBar style='auto'/>
<FlatList 
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
initialNumToRender={4} 
contentContainerStyle={{ alignSelf: 'stretch' }}
keyExtractor={({ id }, index) => id} 
renderItem={({item}) => (

<TouchableOpacity onPress={() => navigation.navigate('FullNews', item)}>  


</TouchableOpacity>
)} />
</View>
);

}}

Answer 1

你需要从props中获取导航，你可以解构它。并得到如下的导航

const { navigation } = this.props;

或者你可以直接这样使用

this.props.navigation.navigate('FullNews', item)

但是我建议使用解构道具

export default class ENews extends Component {

render() {
const { navigation } = this.props;
return (

<View style={styles.main}>

<StatusBar style='auto'/>

<FlatList 
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
initialNumToRender={4} 
contentContainerStyle={{ alignSelf: 'stretch' }}
keyExtractor={({ id }, index) => id} 
renderItem={({item}) => (

<TouchableOpacity onPress={() => navigation.navigate('FullNews', item)}>  


</TouchableOpacity>
)} />

</View>
);

}}

Answer 2

父类

export default class ComponentName extends Component {
render() {
return (
<>
...other component
<ENews {...this.props}></ENews>
</>
);
}
}

你组件

export default class ENews extends Component {
render() {
const {navigation} = this.props; // here you destructuring you props
return (
<View style={styles.main}>
<StatusBar style="auto" />
<FlatList
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
initialNumToRender={4}
contentContainerStyle={{alignSelf: 'stretch'}}
keyExtractor={({id}, index) => id}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => navigation.navigate('FullNews', item)}
/>
)}
/>
</View>
);
}
}

在你的代码中像上面那样修改