1

应用程序的结构是这样的。

  • 堆栈导航器
    • StackA-Screen(TabNavigator)
      • TabChildA-屏幕
      • TabChildB-屏幕
      • ...
    • StackB-屏幕

代码在App.js

const TabComponent = TabNavigator(
{
    TabChildA-Screen: {
    screen: TabChildA,
    },
    TabChildB-Screen: {
    screen: TabChildB,
    }
},
{
    tabBarPosition: "bottom",
    animationEnabled: false,
    swipeEnabled: false
}
);

const StackComponent = StackNavigator(
{
    StackA-Screen: {
    screen: TabComponent,
    navigationOptions: ({ navigation }) => ({
        headerBackTitle: null,
        headerRight: (
        <TouchableWithoutFeedback
            onPress={() =>
            navigation.navigate("StackB-Screen", { space: "" }) // can't navigate to "StackB-Screen".
            }
        >
            <MaterialIcon
            name="playlist-add"
            size={Sizes.NavigationBar.Icon.Size}
            style={{ padding: 8, color: Colors.White }}
            />
        </TouchableWithoutFeedback>
        )
    })
    },
    StackB-Screen: {
    screen: StackB,
    }
},
{
    initialRouteName: "StackA-Screen",
    mode: "modal"
}
);

export default StackComponent;

我想导航TabChildA-Screen到StackB-Screen。但是，TabChildA-Screen可以参考navigatoris navigatorof TabNavigator。

代码在TabChildA-Screen

import React, { Component } from "react";
import { Button, Text, View } from "react-native";

class StackB extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
    <View
        style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
        }}
    >
        <Button
        onPress={ () =>
            this.props.navigation.navigate("StackB-Screen") // can't navigate to "StackB-Screen".
        }
        title="move to StackB-Screen"
        />
    </View>
    );
}
}

export default StackB;

如何TabChildA-Screen参考StackNavigator？

4

0 回答 0