React Native Invariant Violation：查看配置

Question

我正在嘗試在React Native項目上使用不同的屏幕練習。 這是我在App.js文件中的代碼。

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',
  },
});

當我運行react-native run-android時，我得到一個Invariant Violation，它告訴我“查看配置未找到或名稱導航”。 然后是發生此違規行為的所有網站。 請幫助謝謝。

Answer 1

任何組件的名稱必須大寫。 在您的名稱中，組件“navigation”不是大寫的。 它應該是“導航”。

Answer 2

在本機中，組件的名稱應以大寫字母開頭，因此它將是：

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

});

並用資本稱呼它：

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