react-native - 我如何将道具从组件 A 传递到 C，而两者之间有 B？

Question

我需要将一些道具传递给我的子组件，但是在包含道具的文件和将接收道具的文件之间有一个 tabNavigator。

例子：

Home.js：（这是保存道具的组件）

export default class Home extends Component<{}>
{
    render() {
        return (
            <View style={{ flex: 1 }}>
                <TabNavigator
                    changeScreen={() => this.props.navigation.navigate('Profile'))//this is the props
                />
            </View >
        );
    }
}

TabNavigator.js：

const MainScreenNavigator = TabNavigator({
    tab1: {
        screen: ChatScreen
    },
    tab2: {
        screen: NoMatterScreen
    }
})

ChatScreen.js：（这是我需要使用从 Home.js 发送的道具的组件

export default class ChatScreen extends Component<{}>
{
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Button
                    onPress={() => this.props.changeScreen())
                />
            </View >
        );
    }
}

这里的问题是 TabNavigator，如果两者之间有一个 TabNavigator，ChatScreen 如何从 Home 接收道具？为了清楚起见，Home 发送的道具来自 DrawerNavigator，在我的 DrawerNavigator 中，我有 Home 和 Profile 屏幕。

Answer 1

我建议您使用 Redux，但这里有一个链接，您可以使用该链接通过代码中的一些更改来解决您的问题。

https://reactnavigation.org/docs/intro/nesting

或者您仍然可以通过将 TabNavigator 添加到 home.js 来尝试一下

export default class Home extends Component<{}>
{
    render() {
        return (
            <View style={{ flex: 1 }}>
                <MainScreenNavigator
                    changeScreen={() => this.props.navigation.navigate('Profile'))//this is the props
                />
            </View >
        );
    }
}
const MainScreenNavigator = TabNavigator({
    tab1: {
        screen: ChatScreen
    },
    tab2: {
        screen: NoMatterScreen
    }
})

当您将 props 传递给 TabNavigator 时，它会分发给它的所有子项。