web-dev-qa-db-ja.com

React Native Invariant Violation：構成の表示

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を実行すると、「設定が表示されない、またはナビゲーションに名前を付ける」というインバリアント違反が表示されます。そして、この違反が発生するすべてのサイト。どうぞよろしくお願いします。

javascriptandroidreact-native
41
Quim Baget

コンポーネントの名前は大文字にする必要があります。あなたの名前では、コンポーネント「ナビゲーション」は大文字ではありません。それは「ナビゲーション」でなければなりません。

128
Kevin mei

React Nativeでは、コンポーネントの名前は大文字で始まる必要があるため、次のようになります。

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

});

大文字で呼び出します：

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