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