Передача объекта Navigator в renderItem

Question

Я изо всех сил пытаюсь сделать Navigator объект видимым в List Компоненте. Здесь код объяснил: как вы можете видеть в RootDrawer, у меня есть Concept компонент. Он просто показывает список элементов на основе id, переданного в param. Каждый предмет указывает на другой Concept с другим идентификатором, но я получаю

undefined is not an object (evaluating 'navigation.navigate')

когда я нажимаю на <RippleButton> с onPress={() => navigation.navigate('Concept',{id:12}). Проблема здесь, я не передаю объект навигации правильно. Как я могу решить?

основной ящик навигатора

const RootDrawer = DrawerNavigator(
    {

        Home: {
            screen: StackNavigator({
                Home: { screen: Home }
            })
        },
        Search: {
            screen: StackNavigator({
                Cerca: { screen: Search },
                Concept: { screen: Concept },
            })
        }
    }
);

Компонент понятия

export default class Concept extends Component {

    loading = true
    static navigationOptions = ({ navigation,state }) => ({
        headerTitle: "",
        title: `${navigation.state.params.title}` || "",
    })
    constructor(props) {
        super(props);
    }
    async componentDidMount(){
    }

    render() {
        const { params } = this.props.navigation.state;
        const id = params ? params.id : null;
        const { t, i18n, navigation } = this.props;
        const Concept = DB.get(id)


        return (
            <View>
                <ScrollView>
                    <List data={Concept.array|| []} title={"MyTile"} navigation={navigation} />
                </ScrollView>
            </View>
        );
    }

}

Компонент списка

class List extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { navigation } = this.props;
    }
    _renderItem = (item,navigation) => (
        <RippleButton
            id={item.id}
            onPress={() => navigation.navigate('Concept', { id: 12, otherParam: 'anything you want here'})}> //this line throws the error
            <Text>{item.Term}</Text>

        </RippleButton>

    )

    render() {
        const { navigation } = this.props;
        return (
            <View>
                <FlatList
                    data={this.props.data}
                    renderItem={({item}) => this._renderItem(item, navigation)}
                />
            </View>)
    }
}

Answer 1

Вместо прохождения навигационной стойки вы можете попробовать использовать withNavigation HOC.

Где ваш компонент списка определен:

import { withNavigation } from 'react-navigation`

....


export default withNavigation(List)

Теперь компонент List будет иметь доступ к navigation prop