I have a problem with adding the {navigation} parameter to the export default class extends Component, I need it for the FlatList

How can I add it here?

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

CodePudding user response：

You need to get navigation from props you can either deconstruct this.props and get navigation like this

const { navigation } = this.props;

or you can directly use it like this

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

But I suggest using deconstructing props

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

CodePudding user response：

Parent class

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

you Component

 export default class ENews extends Component {

render() {

 const {navigation}=this.props --> here you destructuring you props 
      whatever pass in you parent class
 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>
  );

}}

change as above in your code