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/>;
}
}