React Native入门(二)之Hello World(AwesomeProject)项目介
前言在上一篇博客中,我们介绍了RN环境的搭建,以及遇到的各种坑,历经千辛万苦,终于算是完成了!也生成了一个项目,下面呢,我们就来简单了解一下生成的这个项目及相关的问题 项目目录我们使用
index.android.js下面我们来看一下 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Text,View
} from 'react-native';
export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started,edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'n'} Shake or press menu button for dev menu </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,}); AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
我是没有前端基础的,但是上面的代码,还是大概知道表达的什么意思! 在查阅了一些资料后,上边的代码是ES2015(也叫作ES6)的语法——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现,所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的 关于学习了解ES2015的话,可以看看阮一峰老师的书: 其实上边的 好了,接着看中间一段代码,对于 下面就到两个比较陌生的东西 render() {
return (
//...jsx语句(就是我们熟悉的布局)
);
}
好了下面说 AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
需要注意的一点就是代码中单引号内的内容是我们init项目的时候的项目名称, 另外这里的箭头函数是ES6中新增的, function() { return AwesomeProject }
这里先了解就可以了! 接下来我们看第三段代码: const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',welcome: {
...
},instructions: {
...
},});
这个不就是我们在Android中写的style嘛,里边是需要设置的view的各个属性,然后在引用的时候,这样写: <View style={styles.container}>
<Text style={styles.welcome}>
.........
</Text>
</view>
还是比较容易理解的,在标签内使用 结语好了本篇关于RN初始化的Hello World项目进行了简单的分析介绍,算是入了门了,接下来就正式进入到RN相关内容的学习中了,我们下篇再见! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |