OGeek|极客世界-中国程序员成长平台

标题: android - 在 react-native-navigation 中从单屏应用程序到基于选项卡的应用程序 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 18:24
标题: android - 在 react-native-navigation 中从单屏应用程序到基于选项卡的应用程序

我想知道如何从单屏应用转变为基于标签的应用。这里有一个类似的问题没有相关答案。

目前我正在这样做

Navigation.startSingleScreenApp({
    screen: {
      screen: 'Login',
      title: 'Login'
    }
  });

  Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'tab1', 
        screen: 'Login', 
        icon: tab1Icon, 
        selectedIcon: tab1Icon, 
        },
        title: 'tab1', 
        navigatorStyle: {}, 
        navigatorButtons: {} 
      },
      {
        label: 'tab2',
        screen: 'tab2',
        icon: tab2Icon,
        selectedIcon: tab2Icon,
        title: 'tab2'
      },
       {
        label: 'tab3',
        screen: 'tab3',
        icon: tab3Icon,
        selectedIcon: tab3Icon,
        title: 'tab3'
      },
  });

所以现在我只是用登录屏幕覆盖第一个选项卡(我在该特定屏幕上隐藏了选项卡”，当我按下登录按钮时，我只需将堆栈向上移动到 tab1 屏幕，其中选项卡可见。

所以即使我有一个 startSingleScreenApp 应用程序仍然从 tabBasedApp 启动，所以我不确定 startSingleScreenApp 有什么作用。

任何有使用此库经验的人可以告诉我如何继续？

---

Best Answer-推荐答案

当用户成功登录时，我会创建一个模态视图，然后依次显示 TabNavigator。

让我们从应用的入口点开始，App.js 文件:

import...

export default class App extends React.Component {
  render() {
    return (
        <LoginScreen/>
    );
  }
}

AppRegistry...

这将在启动应用程序时显示您的 LoginScreen，并且在 LoginScreen.js 中，您将在其中存储 Modal

import ...

class LoginScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      successfulLoginModalVisible: false
    }
  }

 setSuccessfulLoginModalVisible(visible) {
    this.setState({successfulLoginModalVisible: visible});
  }

...

  render() {
    return(
      <ViewContainer>
        <Modal
          animationType={"slide"}
          visible={this.state.successfulLoginModalVisible}
        >
          <SuccessfulLoginScreen onLogout={() => this.hideSuccessfulLoginModal()}/>
        </Modal>
      </ViewContainer>
    );
  }
}

简单地说，在 native react 中，模态将根据应存储在状态中的 bool 值呈现自己(即 this.state.successfulLoginModalVisible)。要使这个 Modal 可见，只需调用 setSuccessfulLoginModalVisible(true) 函数(例如按下按钮)

最后，让我们看一下SuccessfulLoginScreen.js:

import ...
export const MyAccountStack = StackNavigator({ //This stack will be used to manage the Tab1 stack

  MyAccount: { screen: MyAccountTab },
  ViewFollowers: { screen: ViewFollowersScreen },
  ViewFollowing: { screen: ViewFollowingScreen },
  EditAccount: { screen: EditAccountScreen },

});

export default tabNavigation = TabNavigator ({

  Tab1: {screen: MyAccountStack,
      navigationOptions: {
        tabBarLabel: 'My Account',
      }
  },
  Tab2: {screen: ...},
  Tab3: {screen: ...},
  }, {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    tabBarOptions: {
        activeTintColor: 'white',
        activeBackgroundColor: 'darkgrey',
    }
});

然后，此逻辑将允许您为每个单独的选项卡维护一个堆栈。

这是我将采取的方法。请注意，我一直强调我在 iOS 上的开发；我还没有在 Android 上检查过这种行为(但我相信应该不会有太大的差异，如果有的话)。希望我能帮上忙!

关于android - 在 react-native-navigation 中从单屏应用程序到基于选项卡的应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45421554/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4