个性化阅读
专注于IT技术分析

创建第一个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',
  },
});

模拟器显示如下:

运行native app

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',
  },
});
react native hello world程序
赞(0)
未经允许不得转载:srcmini » 创建第一个React Native Android APP – React Native实战教程

评论 抢沙发

评论前必须登录!