Я пытаюсь создать приложение android, используя реактивный язык. Вот мой макет:
Домашний экран - предоставляет пользователю возможность входа в систему и переходит на страницу Page2 (окрашена в желтый цвет) - предоставляет меню ящика для перехода на страницу 3 (страница поиска) или страницу 4 (страница добавления) Page3 (красного цвета) - обеспечивает представление с красным фоном и текстом Page4 (зеленого цвета (- обеспечивает представление с зеленым фоном и текстом
My Issue : я не вижу страницу 2 (желтый) экран) ** После успешного входа в систему домашний экран автоматически переходит на страницу 2, но вместо отображения страницы 2 (желтого цвета) я получаю красную страницу с меню ползунка и, если я выбираю страницу 4 (зеленый цвет) с меню ползунка.
Пожалуйста, смотрите прилагаемые изображения для ясности (Примечание: я не вижу страницу 2, даже если отображается меню слайдера)
Мой код:
APP. JS
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {View, Text} from 'react-native';
import HomeScreen from './pages/HomeScreen';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import Page4 from './pages/Page4';
const App = createStackNavigator({
Home: {screen: HomeScreen},
Page2 : {screen: Page2},
Page3: {screen: Page3},
Page4: {screen: Page4},
},
{
initialRouteName: 'Home',
}
);
export default createAppContainer(App);
HomeScreen. js
import React, {Component} from 'react';
import {ImageBackground, StyleSheet,TextInput, Button, View, Text} from 'react-native';
export default class HomeScreen extends Component {
static navigationOptions ={
title: "HomeScreen"
};
constructor(props)
{
super(props);
this.state = {
login : false
}
}
ConfirmLogin = () =>
{
const {navigate} = this.props.navigation;
this.setState({login : true});
console.log("Confirm Login");
if (this.state.login == true)
{
console.log("State is set");
navigate('Page2');
}
}
render()
{
return (
<View style={styles.container}>
<Text style = {styles.companyName}> HomeScreen </Text>
<View style = {styles.InputContainer}>
<TextInput style = {styles.login}
underlineColorAndroid = "black"
placeholder = "username"
autoCapitalize = "none"
autoCapitalize = "none"
placeholderTextWeight = "bold"
/>
<TextInput style = {styles.login}
underlineColorAndroid = "black"
placeholder = "password"
autoCapitalize = "none"
secureTextEntry = {true}
/>
<Button
onPress = {this.ConfirmLogin}
title = "Submit"
color = "blue"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#87CEEB',
flexDirection: 'column',
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
companyName: {
color : 'grey',
fontSize : 50,
justifyContent : 'center',
fontWeight : 'bold'
},
InputContainer: {
height : 120,
width : 320,
backgroundColor : 'rgba(0,0,0,0)',
color : 'white'
}
})
Page2. JS
import React, {Component} from 'react';
import {StyleSheet,Button, View, Text} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {DrawerNavigator, createAppContainer} from 'react-navigation';
import {NavigationContainer} from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import Page3 from './Page3';
import Page4 from './Page4';
import DrawerNavigation from './Navigation';
export default class Page2 extends Component{
render()
{
return(
<View style={styles.container}>
<DrawerNavigation/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow',
flexDirection: 'column',
},
})
Стр.3. js
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, View} from 'react-native';
import {Icon, Container, Header, Content} from 'native-base';
export default class Page3 extends Component
{
render()
{
return(
<View style = {styles.container}>
<Text> Search Parts </Text>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
backgroundColor: 'red',
flexDirection: 'column',
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
}
});
Стр.4. js
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, View} from 'react-native';
import {Icon, Container, Header, Content} from 'native-base';
export default class Page4 extends Component
{
render()
{
return(
<View style = {styles.container}>
<Text> Add Product Screen </Text>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
backgroundColor: 'green',
flexDirection: 'column',
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
}
});
Навигация. js
import React, {Component} from 'react';
import HomeScreen from './HomeScreen';
import Page3 from './Page3';
import Page4 from './Page4';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
const drawer = createDrawerNavigator();
function DrawerNavigation(){
return(
<NavigationContainer>
<drawer.Navigator>
<drawer.Screen name='Page 3' component={Page3}/>
<drawer.Screen name="Page 4" component={Page4}/>
</drawer.Navigator>
</NavigationContainer>
);
}
export default DrawerNavigation
