Блог

#javascript #android #react-native #react-navigation

#javascript #Android #react-native #react-навигация

Вопрос:

 import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './App/components/Login.js';

const Application = StackNavigator({
  Home: { screen: Login },
}, {
    navigationOptions: {
      header: false,
    }
  });

export default class App extends Component {
render() {
    return (
       <Application />
    );
  }
}  

 import React,{Component} from 'react';
import{
    View,
    Text,
    Stylesheet
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class Login extends Component{
    render(){
        return(
            <Text>Test</Text>
        );
    }
}  

Комментарии:

1. Какую версию react-navigation вы используете?

2. @Andrew Как это проверить? потому что я просто запускаю command npn install --save react-navigation . Я установил ее 1 час назад. означает, что она актуальна.

3. Тогда ваша проблема в том, что вы следуете старому руководству, потому что StackNavigator оно устарело в версии v2. Поскольку вы, скорее всего, используете версию v3, вам нужно убедиться, что вы используете правильные функции и т.д., Пожалуйста, ознакомьтесь с документацией для получения дополнительной информации.

4. @Andrew Спасибо, что указали, что я использую старый учебник. С этого момента я буду использовать последнюю версию. Спасибо.

Ответ №1:

 import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from './App/components/Login.js';

const Application = createStackNavigator({
  Home: { screen: Login },
}, {
    navigationOptions: {
      header: false,
    }
  });

class App extends Component {
render() {
    return (
       <Application />
    );
  }
}
export default createAppContainer(Application);