将道具传递给 topnavigations 的所有屏幕

Question

我正在尝试向所有屏幕子项发送道具，但只有默认屏幕才能获得道具。我想将道具发送到顶部导航的所有屏幕。我试图直接导航到该选项卡，但它也不起作用。我不知道我做错了什么。

class RestaurantSummary extends Component {

render () {   

return (
  <TouchableRipple
  onPress={() => this.props.nav.navigation.navigate("Plat", { restaurant: this.props.restaurant, 
  token: this.props.token, uri: uri})}>
    <Card style={styles.container}>
        <Card.Cover source={{ uri: uri }} />
        <Card.Content style={styles.content}>
        <Text style={styles.Text}>{this.props.restaurant.name} - {this.props.restaurant.address} </Text>
        </Card.Content>
      </Card>           
  </TouchableRipple>
)
  }
}

以下是我构建导航的方式。我有一个切换导航器，它允许我在应用程序堆栈和主堆栈之间切换。在应用程序堆栈中，我有顶部导航栏。

const TabScreen = createMaterialTopTabNavigator(
    {
        Entrées: { screen: Entrées },
        Plat: { screen: Plat },
    },
    {
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: true,
        tabBarOptions: {
        activeTintColor: '#FFFFFF',
        inactiveTintColor: '#F8F8F8',
        style: {
            backgroundColor: '#633689',
        },
        labelStyle: {
            textAlign: 'center',
        },
        indicatorStyle: {
        borderBottomColor: '#87B56A',
        borderBottomWidth: 2,
        },
    },
  }, {
      initialRouteName: 'Plat',
  }
);

const top = createStackNavigator({
    TabScreen: {
        screen: TabScreen,
        navigationOptions: {
            headerStyle: {
                backgroundColor: 'transparent',
            },
            headerTintColor: '#FFFFFF',
            title: 'TabExample',
       },
    },
});

const AuthStack = createStackNavigator({
    SignIn: {
        screen: SignIn
    },
    SignUp: {
        screen: SignUp
    },
    SignUpBiss: {
        screen: SignUpBiss
    }
},{
    navigationOptions: {
        headerTransparent: true,
    },
    mode: 'modal',
    headerBackTitleVisible: 'true'
})


const AppStack = createStackNavigator({
    Home: {
        screen: Home
    },
    tab: top,
    RestaurantDetail: {
        screen: RestaurantDetail,
        navigationOptions:()=>{
            return { 
                tabBarVisible:false,
            };
        }
    },
})

AppStack.navigationOptions = ({ navigation }) => {
    let tabBarVisible = true;
    if (navigation.state.index > 0) {
     tabBarVisible = false;   }
    return {
     tabBarVisible,
    }

}


const bottomNav = createBottomTabNavigator({
    Home : AppStack,
    Logout : {screen: Logout}
})


const Nav = createSwitchNavigator({
    App: bottomNav,
    Auth: AuthStack
}, {
    initialRouteName: 'Auth',
})

export default createAppContainer(Nav)

Answer 1

我看到了你的问题，感觉你的代码有点乱。首先你可以改变

onPress={() => this.props.nav.navigation.navigate("Plat", to onPress={() => this.props.nav.navigation.navigate("TabScreen",

然后在您的选项卡屏幕中尝试此代码

this.props.navigation.dangerouslyGetParent().getParam('restaurant') this.props.navigation.dangerouslyGetParent().getParam('token') this.props.navigation.dangerouslyGetParent().getParam('uri')

希望对你有所帮助。如有疑问，欢迎留言

将道具传递给 topnavigations 的所有屏幕

Pass to props to all screen of topnavigations

react-native

react-navigation

react-props