Question

使用

时，我的红色屏幕如下

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableHighlight,
    ActivityIndicatorIOS,
    NavigatorIOS,
    Image,
    Component
} = React;

然而，在使用

时它可以正常工作

import React from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS
} from 'react-native';

但如果我把它改成

var React = require('react');

它出现了另一个红色屏幕：

我的index.ios.js中的完整代码是这样的：

'use strict';

//import React from 'react';
//
//import {
//    AppRegistry,
//    StyleSheet,
//    Text,
//    View,
//    NavigatorIOS
//} from 'react-native';

var React = require('react-native');

var styles = React.StyleSheet.create({
    text: {
        color: 'black',
        backgroundColor: 'white',
        fontSize: 30,
        margin: 80
    },
    container: 
    {
        flex: 1
    }
});

class HelloWorld extends React.Component {
  render() {
    //return React.createElement(Text, {style: styles.text}, "Hello World!");
      return <Text style={styles.text}>Hello World Again</Text>;
  }
}

class PropertyFinderApp extends React.Component {
    render() {
        return (
            <NavigatorIOS
                style = {styles.container}
                initialRoute={{
                    title: 'Property Finder',
                    component: HelloWorld,
            }}/>
        );
    }
}

//AppRegistry.registerComponent(
React.AppRegistry.registerComponent(
    'PropertyFinder', 
    function() { return PropertyFinderApp }
);

仅供参考：我是按照Raywenderlich的教程here学习RN的。所以从那里复制完整的代码。

以下是版本信息的package.json：

{
  "name": "PropertyFinder",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.1.0",
    "react-native": "0.28.0"
  }
}

Answer 1

Component移至 React 而不是 React-Native ：

import React, {
  Component
} from 'react';

import ReactNative, {
  ...
} from 'react-native';

当然，您也可以根据要求进行此操作，但没有限制。

Answer 2

我认为此处的问题不是导入或需要，而是导入的内容。

你试过替换

吗？

var React = require('react-native')

到

var React = require('react')

在facebook解除反应并在其最近的一次更新中反应原生之后，这种变化开始了

在React Native上使用require而不是import时出现红屏

2 个答案: