javascript - React Native AppRegistry 不是可调用模块

Question

这个问题已经有答案了:

React Native project, index.ios.js or index.android.js not generated (2 个回答)

已关闭 5 年前。

我在遵循“学习 React Native O Reilly”中的教程时遇到了一个小问题。

我在第一个应用程序(WeatherProject)上，当我执行react-native init WeatherProject命令时，奇怪的是index.ios.js和index.android.js没有自动创建？我认为这是正常的。所以我创建了它们，并填充它们如下:

var React = require('react-native');
var { AppRegistry } = React;
var WeatherProject = require('./WeatherProject');
AppRegistry.registerComponent('WeatherProject', () => WeatherProject);

然后我得到了 WeatherProject.js 文件，如下所示:

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "" };
  }

  _handleTextChange = event => {
    this.setState({ zip: event.nativeEvent.text });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: "center"
  }
});

export default WeatherProject;

并制作index.js文件如下:

import WeatherProject from "./WeatherProject";

export default WeatherProject;

我正在关注的书是否已过时，或者我是否做了一些愚蠢的事情？但是当我在 iPhone 模拟器上运行该应用程序时，出现错误“AppRegistry 不是可调用模块。(调用 runApplication)”

Answer 1

您导入了错误的 AppRegistry 并使用react。

尝试将它们导入到您的index.ios.js和index.android.js中，如下所示:

import React from 'react';
import { AppRegistry } from 'react-native';
import WeatherProject from './WeatherProject';

这应该有效。

你应该查看官方文档，这里是AppRegistry.registerComponent的示例 https://facebook.github.io/react-native/docs/props.html#content