react-native - 登录后带有顶部选项卡的抽屉导航
问题描述
我一直在尝试构建一个应用程序,它会在启动后进入登录屏幕。用户登录后,应将其定向到具有抽屉导航和选项卡的屏幕。我一直在尝试使用 react native expo 来实现这一点。它在世博会工作得很好。但是,一旦我生成了一个 APK 并尝试使用它,登录后它会重定向到启动和登录,而不显示任何内容。我一直在使用 react-navigation 包在屏幕之间导航
我的 Navigator.js:
import React from 'react';
import { createAppContainer, createDrawerNavigator, createStackNavigator } from 'react-navigation';
import SplashScreen from '../screens/SplashScreen';
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
import Screen3 from '../screens/Screen3';
import MainDrawer from '../common/MainDrawer';
const LoginNavigator = createStackNavigator({
splash: SplashScreen
}, {
headerMode: 'none',
navigationOptions: {
headerVisibile: false,
}
});
const DrawerNavigator = createDrawerNavigator({
screen1: Screen1,
screen2: Screen2,
screen3: Screen3,
}, {
initialRouteName: 'screen1',
contentComponent: props => <MainDrawer {...props} />,
drawerWidth: 350,
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
const TotalNavigator = createStackNavigator({
loginStack: { screen: LoginNavigator },
drawerStack: { screen: DrawerNavigator },
}, {
headerMode: 'none',
initialRouteName: 'loginStack',
navigationOptions: {
headerVisible: false,
}
})
PrimaryNavigator = createAppContainer(TotalNavigator);
export default PrimaryNavigator;
我的 MainDrawer.js:
import React from 'react';
import { View, Text } from 'react-native';
import Image from 'react-native-remote-svg';
export default class MainDrawer extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
header: null,
};
render() {
return (
<View style={{ width: '100%', height: '100%', backgroundColor: '#2C2663' }}>
<View style={{ left: '7%', top: '10%' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Image source={require('../assets/images/user_pic.svg')} />
<Text style={{ color: '#fff', fontSize: 25, flexDirection: 'row', left: '-28%', top: '10%' }}> SomeOne</Text>
</View>
<View style={{ width: '80%', borderBottomWidth: 1, borderBottomColor: '#C0C0C0', top: '20%' }} />
<Text style={{ color: '#C0C0C0', fontSize: 11, top: '30%' }}>
{`Some dummy text`}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', top: '40%' }}>
<Image style={{ width: 30, height: 30 }} source={require('../assets/images/icon.svg')} />
<Text style={{ color: '#fff', fontSize: 20, flexDirection: 'row', left: '-40%', top: '10%' }}
onPress={() => this.props.navigation.navigate('screen1')}> Screen 1 </Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', top: '50%' }}>
<Image style={{ width: 30, height: 30 }} source={require('../assets/images/icon2.svg')} />
<Text style={{ color: '#fff', fontSize: 20, flexDirection: 'row', left: '-42%', top: '10%' }}
onPress={() => this.props.navigation.navigate('screen2')}
> Screen 2</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', top: '60%' }}>
<Image style={{ width: 30, height: 30 }} source={require('../assets/images/icon3.svg')} />
<Text style={{ color: '#fff', fontSize: 20, flexDirection: 'row', left: '-16%', top: '10%' }}
onPress={() => this.props.navigation.navigate('screen3')}
> Screen 3</Text>
</View>
</View>
</View>);
}
}
我的 SplashScreen.js:
import React from 'react';
import { Animated } from 'react-native';
import LottieView from 'lottie-react-native';
import LoginScreen from './LoginScreen.js';
export default class SplashScreen extends React.Component {
constructor(props) {
super(props);
this.state = { isAnimationVisible: true, animationProgress: new Animated.Value(0) };
this.homeScreen = this.homeScreen.bind(this);
}
static navigationOptions = {
header: null,
};
componentDidMount() {
Animated.timing(this.state.animationProgress, { toValue: 1, duration: 15000 })
.start(() => this.setState(s => ({ ...s, isAnimationVisible: false })));
}
//Navigate to Home screen
homeScreen() {
this.props.navigation.navigate('drawerStack');
}
render() {
if (this.state.isAnimationVisible) {
const interpolation = this.state.animationProgress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] });
return (
<LottieView
source={require('../assets/animations/splash.json')}
progress={interpolation}
autoPlay
loop={false}
resizeMode='cover'
/>
);
}
else {
return (<LoginScreen goToHome={this.homeScreen} />);
}
}
}
我的 LoginScreen.js:
import React from 'react';
import { View, Image, Text, TextInput, KeyboardAvoidingView, ActivityIndicator } from 'react-native';
import { Button } from 'native-base';
import loginStyles from '../styles/loginStyles';
class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
this.onButtonPress = this.onButtonPress.bind(this);
}
static navigationOptions = {
header: null,
};
onButtonPress() {
let Users = list of users;
for (let i = 0; i < Users.length; i++) {
if ((Users[i].username == this.state.email) && (Users[i].password = this.state.password)) {
this.props.goToHome();
}
}
render() {
// On pressing login after giving credentials this.onButtonPress() is called
}
}
export default LoginScreen;
有人可以指出问题出在哪里并提出修复建议吗?提前致谢。
解决方案
而不是创建TotalNavigator
为 StackNavigator SwitchNavigation
,而是在根目录下使用,如下所示:
SwitchNavigator
|
|-SplashScreen # Create this as single screen no need to create Stack, initial screen
|
|-LoginNavigator
|
|-DrawerNavigator
然后在直接LoginScreen
导航到时MainDrawer
,它也会处理后按。
推荐阅读
- css - CSS 谷歌地图消失效果
- java - 为什么输出会是“100”和“500”?
- c++ - 将(排序的)std::vector 传递给方法
- mysql - SQL连接具有重复条目和count()组的多个表
- mongodb - 按小时分组并计数 MongoDB
- amazon-redshift - Redshift:更改服务器配置或保留更改所有会话
- xamarin - 如何在列表视图中实现 xamarin Forms Checkbox 仅删除选中的行
- python - AWS Elastic BeanStalk SignatureDoesNotMatch
- c# - 从网站收到的 JSON.net 过滤器存储库
- java - 如何从订阅者返回 Observable?