React 本机不变违规:查看配置

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 时，我收到一个不变冲突，它告诉我"查看未找到的配置或名称导航"。然后是发生此违规行为的所有站点。请帮忙，谢谢。

Answer 1

任何组件的名称都必须大写。在您的名义中，组件"导航"未大写。它应该是"导航"。

Answer 2

在 react native 中，组件的名称应以大写字母开头，因此它将是：

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

并用资本称之为：

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