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

上一章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',
  },
});

模拟器显示如下：

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 srcmini02.com</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

猜你喜欢