javascript - studio - Reaccionar violación nativa invariable: ver configuración

react native tutorial

Question

Estoy tratando de practicar con diferentes pantallas en un proyecto React Native. Aquí está mi código del archivo App.js.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ''react'';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from ''react-native'';

import { StackNavigator } from ''react-navigation'';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: "welcome",
    };
    render() {
        return <Text style={{ color: ''black ''}}>Hello, Navigation!</Text>;
    }
}

const navigation = StackNavigator({
    Home: { screen: HomeScreen },

});

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ''center'',
    alignItems: ''center'',
    backgroundColor: ''#fff'',
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Cuando ejecuto react-native run-android, recibo una infracción invariante que me dice "para ver la configuración no encontrada o la navegación por el nombre". Y luego todos los sitios donde ocurre esta violación. Ayuda pls gracias

Answer 1

El nombre de cualquier componente debe estar en mayúsculas. En su nombre, el componente "navegación" no está en mayúsculas. Debe ser "navegación".

Answer 2

En reaccionar de forma nativa, el nombre del componente debe comenzar con mayúscula, por lo que será:

const Navigation = StackNavigator({
    Home: { screen: HomeScreen },

});

y llámalo con capital:

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