首页 文章

React Native Invariant Violation：查看配置

提问于
浏览 次
33

我正在尝试在React Native项目上使用不同的屏幕练习 . 这是我在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>

当我运行react-native run-android时，我得到一个Invariant Violation，告诉我“查看配置未找到或名称导航” . 然后是发生此违规行为的所有网站 . 帮忙谢谢

javascript android react-native

2 回答

  • 1

    任何组件的名称必须大写 . 在您的名称中，组件“navigation”不是大写的 . 它应该是“导航” .

    回复于
  • 117

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

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

});

    并用资本称呼它：

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

相关问题