Reagieren Nativ/Reagieren Navigation, gleiches Niveau Komponente

Question

Ich habe 2 Klassen: meine Standardklasse Homescreen für die Homepage verwendet und eine andere Klasse MyList, die ich verwende, um einen flatlist auf meinem Homescreen zu erzeugen. Mein Problem ist, dass es mir nicht gelingt, meine Navigationsfunktion in meiner MyList Klasse aufzubauen.

Ich bekomme immer den folgenden Fehler: "Kann Variable nicht finden: navigieren".

Ich habe mir diese Calling Navigate on Top Level Component angesehen, aber ich weiß wirklich nicht, wie ich es in meinem Code implementieren soll.

Hier ist, was ich versucht habe:

class MyList extends React.Component { 

    _keyExtractor = (item, index) => item.note.id; 

    _renderItem = ({ item }) => (
     <TouchableNativeFeedback 
      onPress={() => navigate('Note', { noteId: item.note.id })} > 
      <View> 
       <Text style={styles.noteElementTitle} >{item.note.title}</Text> 
       <Text style={styles.noteElementBody} >{item.note.body}</Text> 
      </View> 
     </TouchableNativeFeedback> 
    ); 

    render() { 
     return (
      <FlatList 
       data={this.props.data} 
       keyExtractor={this._keyExtractor} 
       renderItem={this._renderItem} 
      /> 
     ); 
    } 

} 


export default class HomeScreen extends React.Component { 

    static navigationOptions = { 
     title: 'Notes', 
     headerStyle: { backgroundColor: 'rgb(255, 187, 0)' }, 
     headerTitleStyle: { color: 'white' }, 
    }; 

    render() { 

     const { navigate } = this.props.navigation; 

     return (
       <MyList 
        data={this.state.data} 
        load={this.state.load} 
        navig={this.props.navigation} 
       > 
       </MyList> 

     ); 
    } 
} 

const Project = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    NewNote: { screen: NewNoteScreen }, 
    Note: { screen: NoteScreen } 
}); 


AppRegistry.registerComponent('Project',() => Project); 

Vielen Dank für Ihre Hilfe.

Answer 1

Da Ihre Komponente MyList nicht Teil Ihres Stapels ist, ist die Navigationsstütze nicht dafür verfügbar.

Sie haben 2 Möglichkeiten.

Erste Option können Sie die Navigation Prop manuell MyList

render() { 
    const { navigate } = this.props.navigation; 
    return (
    <MyList 
     data={this.state.data} 
     load={this.state.load} 
     navigation={this.props.navigation} 
    > 
    </MyList> 
); 
} 

Zweite Option übergeben Sie withNavigation verwenden können.

withNavigation is a Higher Order Component which passes the navigation prop into a wrapped Component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

import { Button } 'react-native'; 
import { withNavigation } from 'react-navigation'; 

const MyComponent = ({ to, navigation }) => (
    <Button title={`navigate to ${to}`} onPress={() => navigation.navigate(to)} /> 
); 

const MyComponentWithNavigation = withNavigation(MyComponent);