Question

我有一个包含主屏幕的底部标签，并且我想在单击按钮时导航到堆栈中未包含的另一个屏幕。

这是我的 screens.js ，我在其中注册了三个屏幕

export const registerScreens = (Provider, store) => { 
  Navigation.registerComponent('app.Drawer',() =>  Drawer, Provider, store);
  Navigation.registerComponent('app.Home',() =>  Home, Provider, store);
  Navigation.registerComponent('app.About', () => About, Provider, store);
};

这是我的 navigator.js ，在这里我为导航设置了根目录，基本上创建了带有抽屉和底部标签的sideMenu

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    name: 'app.Drawer',
                },
            },
            center: {
                bottomTabs: {
                    children: [
                        {
                            component: {
                                name: 'app.Home',
                                options: {
                                    bottomTab: {
                                        text: 'Tab 1',
                                        icon: require('../assets/icons/account.png'),
                                    },
                                },
                            },
                        }],


                },
            },
        },
    });

和 Home.js

export default class Home extends Component {
  render() {
    return (
      <View style={{
        backgroundColor: 'white', flex: 1, justifyContent: 'center', alignItems: 'center',
      }}
      >
        <Text>Home page</Text>
        <Button
          onPress={() => {
            Navigation.push(this.props.componentId, { <-- doesn't work
              component: {
                name: 'app.About',
              }
            });
          }}
          title="CLick to go to about page"
        />
      </View>
    );
  }
}

Answer 1

您应该将要导航到的所有屏幕添加到根堆栈的中心。（也不要忘记注册屏幕）。

      center: {
              stack: {
                id: "sideDrawerComponents",
                children: [{
                  component: {
                    id: "complaintSD",
                    name: "example.ComplaintScreen"
                  },
                  component: {
                    id: "MainAppSD",
                    name: "example.MainApplicationScreen"
                  }                 
                }]
              },
           }

推送不在选项卡上的屏幕wix v2

1 个答案: