javascript - 如何在 react 中显示 Hello World ？

Question

我正在使用 react-native 使用 ES6 尝试显示“hello world”为什么它不显示 hello world 文本..

这是我的代码

https://rnplay.org/apps/zFnEdg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

class PropertyFinderApp extends React.Component {
  render() {
    return React.createElement(React.Text, {style: styles.text}, "Hello World!");
  }
}


AppRegistry.registerComponent('PropertyFinderApp', () => PropertyFinderApp);

Answer 1

这不起作用，因为您正在使用样式，而样式甚至没有定义。

此外，您还必须从 'react' 库导入 React，而不是从 'react-native' 导入 React，如 docs 中所示。

您的代码应如下所示。

import React, {
  Component,
} from 'react';

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

const styles = StyleSheet.create({
    text: {
        fontSize: 20
    }
});


class PropertyFinderApp extends React.Component {
  render() {
    return (<View>
           <Text style={styles.text}> "Hello World!"</Text>
         </View>)
  }
}

AppRegistry.registerComponent('PropertyFinderApp', () => PropertyFinderApp);

这里是 rnplay 中的示例，请检查 Android 版本。

rnplay