Question

我目前正在构建一个具有两个屏幕的简单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>
    );
  }
}

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

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

 }

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

Answer 3

尝试

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

反应导航不渲染屏幕

3 个答案: