创建第一个React Native Android APP – React Native实战教程 _ReactNative实战教程

上一章React Native实战教程请查看：React Native基本概念和环境安装
接上一章，后面的教程中均使用Websorm作为React Native开发环境，首先打开默认项目的app.js文件，将文件内容改为：

import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default class App extends React.Component { render() { return ( < View style={styles.container}> < Text>打开app.js开始运行你的应用!< /Text> < Text>所做的更改将自动重新加载。< /Text> < Text>摇动你的手机来打开开发者菜单。< /Text> < /View> ); } }const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

模拟器显示如下：

文章图片
【创建第一个React Native Android APP – React Native实战教程】Hello world程序
要显示一个简单的消息如“欢迎来到srcmini”，删除CSS部分，并将被< text> < /text> 标记包装的消息插入到< view> < /view> 中，如下所示。

import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default class App extends React.Component { render() { return ( < View> < Text>Welcome to srcmini.com< /Text> < /View> ); } }const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });