android - 在 react-native-navigation 中从单屏应用程序到基于选项卡的应用程序
<p><p>我想知道如何从单屏应用转变为基于标签的应用。这里有一个类似的问题没有相关答案。</p>
<p>目前我正在这样做</p>
<pre><code>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'
},
});
</code></pre>
<p>所以现在我只是用登录屏幕覆盖第一个选项卡(我在该特定屏幕上隐藏了选项卡”，当我按下登录按钮时，我只需将堆栈向上移动到 tab1 屏幕，其中选项卡可见。</p>
<p>所以即使我有一个 startSingleScreenApp 应用程序仍然从 tabBasedApp 启动，所以我不确定 startSingleScreenApp 有什么作用。 </p>
<p>任何有使用此库经验的人可以告诉我如何继续？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>当用户成功登录时，我会创建一个模态视图，然后依次显示 TabNavigator。 </p>
<p>让我们从应用的入口点开始，<code>App.js</code> 文件:</p>
<pre><code>import...
export default class App extends React.Component {
render() {
return (
<LoginScreen/>
);
}
}
AppRegistry...
</code></pre>
<p>这将在启动应用程序时显示您的 <code>LoginScreen</code>，并且在 <code>LoginScreen.js</code> 中，您将在其中存储 Modal</p>
<pre><code>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>
);
}
}
</code></pre>
<p>简单地说，在 nativereact 中，模态将根据应存储在状态中的 bool 值呈现自己(即 <code>this.state.successfulLoginModalVisible</code>)。要使这个 Modal 可见，只需调用 <code>setSuccessfulLoginModalVisible(true)</code> 函数(例如按下按钮)</p>
<p>最后，让我们看一下<code>SuccessfulLoginScreen.js</code>:</p>
<pre><code>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',
}
});
</code></pre>
<p>然后，此逻辑将允许您为每个单独的选项卡维护一个堆栈。 </p>
<p>这是我将采取的方法。请注意，我一直强调我在 iOS 上的开发；我还没有在 Android 上检查过这种行为(但我相信应该不会有太大的差异，如果有的话)。希望我能帮上忙! </p></p>
<p style="font-size: 20px;">关于android - 在 react-native-navigation 中从单屏应用程序到基于选项卡的应用程序，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45421554/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45421554/
</a>
</p>
页:
[1]