目前在我正在构建的react-native应用程序中,我有一个包含两个屏幕的Drawer Navigator。 对于导航,我正在使用react-navigation。 https://reactnavigation.org/docs/intro/
代码如下,
import { DrawerNavigator } from 'react-navigation'
export default drawernav = DrawerNavigator(
{
Login: {Screen: Login},
Main : {Screen: Main }
}
)
虽然Login在抽屉导航器中,但我想要它,以便登录屏幕没有抽屉导航功能,但主屏幕使用login和main作为抽屉导航器中的两个选项。 但是,现在登录屏幕也有抽屉导航器。有没有办法让登录抽屉导航功能消失?
答案 0 :(得分:1)
请参考以下帖子,这对您很有帮助。 https://github.com/react-navigation/react-navigation/issues/131。 建议了许多方法。 kyaroru提供了一个完整的工作示例,如下所示: https://github.com/kyaroru/ReactNavDrawer。
以下是一个简单的示例:
app.js
import React from 'react';
import { createStackNavigator , createDrawerNavigator } from 'react-navigation';
import LoginScreen from './LoginScreen';
import SignupScreen from './SignupScreen';
import HomeScreen from './HomeScreen';
import DrawerButton from './DrawerButton';
import SettingScreen from './SettingScreen';
const StackNavigator = createStackNavigator ({
Login: {
screen: LoginScreen,
},
Signup: {
screen: SignupScreen,
},
Home: {
screen: HomeScreen,
},
Sitting: {
screen: SettingScreen,
},
},
{
navigationOptions: ({navigation}) => ({
headerLeft: <DrawerButton navigation={navigation} />,
}),
}
);
const DrawerNavigator = createDrawerNavigator({
Menu: {
screen: StackNavigator,
},
Signup: {
screen: SignupScreen,
},
Sitting: {
screen: SettingScreen,
},
});
export default DrawerNavigator;
DrawerButton.js
import React from 'react';
import { TouchableOpacity, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
const DrawerButton = ({ navigation }) => (
<TouchableOpacity
onPress={() => navigation.openDrawer()}
>
<Ionicons name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'} size={28} />
</TouchableOpacity>
);
DrawerButton.propTypes = {
navigation: PropTypes.object.isRequired,
};
export default DrawerButton;
答案 1 :(得分:0)
您想要更改导航结构。根目录应为StackNavigator
,其中包含LoginScreen
和DrawerNavigator
。 DrawerNavigator
中的屏幕可能为StackNavigator
秒。那些StackNavigator
将包含代码的屏幕组件。
答案 2 :(得分:0)
由于您不希望抽屉出现在登录屏幕中,因此请使用此流程
import { DrawerNavigator, createStackNavigator } from 'react-navigation'
const drawernav = DrawerNavigator(
{
Main : {Screen: Main }
}
);
const stack = createStackNavigator(
{
Login: {Screen: Login},
drawer: {screen: drawernav},
}
);
export default stack;
并且将来您想添加屏幕,如果该屏幕需要抽屉,那么该屏幕必须放在抽屉导航器中,不需要抽屉的屏幕应该放在堆栈导航器中。