反应导航不渲染屏幕

Question

我目前正在构建一个简单的反应原生应用程序，它有两个屏幕。我正在使用反应导航在屏幕之间导航，当我尝试按照本指南 https://reactnavigation.org/docs/en/hello-react-navigation.html 进行操作时，它不会呈现任何内容，只是显示一个空白屏幕。也许我错过了一些东西，这就是它不渲染的原因。这是我的js文件：

应用.js

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/components/screens/login';
import Order from './src/components/screens/order';
const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
export default class Sales extends Component {
render() {
return (
<View>
<App />
</View>
);
}
} 

登录.js

class Login extends Components {
static navigationOptions = {
headerShown: false,
};
render() {
return(
<View>
<Button title="Login"
onPress={() => this.props.navigation.navigate('Order')}
/>
</View >
);
}
}

序.js

class Order extends Component {
static navigationOptions = {
headerShown: false,
};
render() {
return (
<View>
<View style={styles.button}>
<Button 
title="Create Order"
color='#65639E'
/>
</View>
</View>
);
}
}

Answer 1

const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
export default class Sales extends Component {
render() {
return (
<View>
<App /> // this is worng.. As there is no app component. Never wrap 
//AppNavigator inside a view
</View>
);
}
}

正确的事情应该是。只是想试探你的要求。

class Login extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Login Screen</Text>
</View>
);
}
}
class Order extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Order Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: Login,
Order: Order
});
export default createAppContainer(AppNavigator);

我希望我能够表达我的观点。如果有任何混淆，请在评论中提及。非常乐意为您提供帮助。

Answer 2

我为自己解决这个问题的方法是从主应用程序容器中删除align-items: center和justify-content: center。

Answer 3

export default class Sales extends Component {
render() {
return (
<View>
<App /> // This code right here
</View>
);
}
} 

您正在渲染<App />但没有应用组件。也许尝试使用<Login />

Answer 4

试试这个

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/components/screens/login';
import Order from './src/components/screens/order';

const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
class Sales extends Component {
render() {
return (
<View>
<AppNavigator />  --> pass here your navigation 
</View>
);
}
}
export default createAppContainer(AppNavigator);