您的当前位置:首页React Native - 01 - Hello World!

React Native - 01 - Hello World!

2024-12-13 来源:哗拓教育

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
显示全文