react导航不渲染屏幕

5jdjgkvh 于 2023-08-07 发布在 React

关注(0)|答案(4)|浏览(128)

我目前正在构建一个简单的react原生应用程序，它有两个屏幕。我正在使用react导航来在屏幕之间导航，当我尝试遵循此指南https://reactnavigation.org/docs/en/hello-react-navigation.html时，它不会呈现任何内容，只是显示一个空白屏幕。也许我错过了什么，这就是为什么它不渲染。以下是我的js文件：
App.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>
    );
  }
}

字符串
login.js

class Login extends Components {
  static navigationOptions = {
    headerShown: false,
  };

  render() {
    return(
      <View>
        <Button title="Login"
          onPress={() => this.props.navigation.navigate('Order')}
        />
      </View >
    );
  }
}

型
order.js

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

型

react-native

来源：https://stackoverflow.com/questions/59674765/react-navigation-not-rendering-screens

4条答案

按热度按时间

7ivaypg91#

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);

型
我希望我能表达我的观点。如果有任何混淆，请在评论中提及。我很乐意帮你。

赞(0）回复(0）举报 2023-08-07

ijxebb2r2#

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

赞(0）回复(0）举报 2023-08-07

qqrboqgw3#

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

 }

字符串
您正在渲染<App />，但没有应用组件。可以尝试使用<Login />

赞(0）回复(0）举报 2023-08-07

vlju58qv4#

试试这个

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);

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

react导航不渲染屏幕

4条答案

相关问题

热门标签

最新问答