如何将组件A中的道具传递给C，而两者之间有B？-Java 学习之路

我需要将一些道具传递给我的子组件，但是我在包含道具的文件和将接收道具的文件之间有一个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屏幕 .

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时，会将其分发给所有子项 .

回复于 2024-04-30T23:47:34+08:00

如何将组件A中的道具传递给C，而两者之间有B？

1 回答

相关问题