从单屏应用转到基于标签的应用在react-native-navigation

我想知道如何从单屏应用转到基于选项卡的应用。这里有一个类似的问题没有相关的答案。从单屏应用转到基于标签的应用在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做任何事情。

任何人与exp使用这个库的人可以告诉我如何继续？

来源

2017-07-31 smuvv

https://github.com/wix/react-native-navigation/blob/master/old-example-redux/src/app.js是，不再维持旧的示例应用 - 但逻辑证明有仍然是正确的。它应该可以帮助你开始。 –

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

让我们开始与你的入口点的应用程序，该App.js文件：

import... 

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

AppRegistry...

这将您LoginScreen在启动应用程序和内部LoginScreen.js介绍，在这里你将存储的模态

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> 
    ); 
    } 
}

简单地说，在反应机，模态将根据应在其上存储在状态（即this.state.successfulLoginModalVisible）一个布尔值呈现自身。为了使这个模态可见，只需调用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上的这种行为（但我相信应该没有太多，如果有的话，差异）。希望我能帮忙！

来源

2017-07-31 17:56:35

从单屏应用转到基于标签的应用在react-native-navigation

回答

相关问题