在 renderItem 中传递导航器对象

Question

我正在努力使Navigator对象在组件List可见。这里的代码解释：正如你在RootDrawer中看到的，我有Concept组件。它只是显示基于传入param id的项目列表。每个项目都指向另一个具有另一个 id 的Concept，但我得到

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

当我用onPress={() => navigation.navigate('Concept',{id:12})按下那个<RippleButton>.这里的问题是我没有正确传递导航对象。我该如何解决？

主导航器抽屉

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)

现在列表组件将可以访问navigation道具