React Native - 01 - Hello World!

React Native就像React，但它使用本地组件而不是Web组件作为构建块。因此，要理解React Native应用程序的基本结构，您需要了解一些基本的React概念，如JSX，组件，状态和道具。如果你已经知道React，你仍然需要学习一些React-Native特有的东西，比如本地组件。本教程针对所有受众，无论您是否具有React经验。

那我们开始吧

按照我们人民的古老传统，首先要建立一个除了说“Hello world”之外什么也不做的应用程序。这里显示：Hello World

第一个组件

创建文件 HelloWroldApp.js

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
    render() {
        return (
            <Text>Hello World!</Text>
        );
    }
}

然后修改启动文件，index.js

import { AppRegistry } from 'react-native';
import App from './App';
import HelloWorldApp from './HelloWorldApp';

// AppRegistry.registerComponent('Hello', () => App);
AppRegistry.registerComponent('Hello', () => HelloWorldApp);

在模拟器中按 command+R 刷新，就可以看到界面变化了

image.png

项目本身是不会隐藏导航栏的，所以如果需要隐藏导航栏，需要在项目中设置

image.png