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", 至 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')

希望它有助于消除疑惑。

传递给道具到所有顶部导航屏幕

1 个答案: