react native之helloworld
2016-01-05 00:26
369 查看
上一篇博客学习了如何在windows下搭建reactnative开发环境,先来简单总结一下吧:
安装react-native命令:
创建react native工程
开启react native服务
进入工程的根目录,执行如下命令,开启服务
使用谷歌浏览器测试服务是否开启成功,输入:
http://localhost:8081/index.android.bundle?platform=android
具体的搭建步骤,以及遇到的错误,可以参考我的上一篇博客windows下搭建react native开发环境
index.android.js
这里我先简单的将欢迎语改为”hello my firstProject”,然后点击menu,或者摇一摇手机,点击”Reload JS”选项,重新加载就可以看到效果了。
这里就是一个javascript数组变量。
这里声明了五个对象。相当于:
的简写,这里说明一下:
AppRegistry 是React Native应用的入口
StyleSheet 提供了一种类似CSS样式表的抽象
Text 一个用于显示文本的React组件
Image 一个用来线束图片的React组件
View 作为创建UI时最基础的组件,类似于android中的android.view.view
这里通过React native为我们提供的StyleSheet组件的create方法来创建样式,这个方法不是必须的,但是如果加上的话,其会检查我们的样式代码是否符合react样式规范。 这里定义了两个样式container和thumbnail
可以看到,这里整个显示的样式是container,通过
完整的代码如下:
此时点击menu->reload js,效果如下:
安装react-native命令:
[code]#在终端输入如下命令来安装react-native命令 npm install -g react-native-cli
创建react native工程
[code] #同样在终端下输入如下命令来创建react native工程 react-native init 工程名
开启react native服务
进入工程的根目录,执行如下命令,开启服务
[code]react-native start
使用谷歌浏览器测试服务是否开启成功,输入:
http://localhost:8081/index.android.bundle?platform=android
具体的搭建步骤,以及遇到的错误,可以参考我的上一篇博客windows下搭建react native开发环境
简单修改
作为android开发,先简单修改项目根目录下的index.android.js文件,看下效果:index.android.js
[code]/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var firstProject = React.createClass({ render: function() { 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}> Shake or press menu button for dev menu </Text> </View> ); } }); var 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('firstProject', () => firstProject);
这里我先简单的将欢迎语改为”hello my firstProject”,然后点击menu,或者摇一摇手机,点击”Reload JS”选项,重新加载就可以看到效果了。
简单的数据显示
这里我先本地模拟一些数据用来显示。打开index.android.js文件,在该文件中创建如下变量:模拟简单数据
[code]var androidinfo = [ {title: 'android', year: '2016', pic: {thumbnail: 'https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/logo/logo201509091.png'}}, ];
这里就是一个javascript数组变量。
声明并赋值需要的变量
[code]var { AppRegistry, StyleSheet, Text, Image, View, } = React;
这里声明了五个对象。相当于:
[code]var AppRegistry = React.AppRegistry; var StyleSheet = React.StyleSheet; var Text = React.Text; var Image = React.Image; var View = React.View;
的简写,这里说明一下:
AppRegistry 是React Native应用的入口
StyleSheet 提供了一种类似CSS样式表的抽象
Text 一个用于显示文本的React组件
Image 一个用来线束图片的React组件
View 作为创建UI时最基础的组件,类似于android中的android.view.view
创建需要的样式
[code]var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 190, height: 60, }, });
这里通过React native为我们提供的StyleSheet组件的create方法来创建样式,这个方法不是必须的,但是如果加上的话,其会检查我们的样式代码是否符合react样式规范。 这里定义了两个样式container和thumbnail
添加显示组件
[code]var firstProject = React.createClass({ render: function() { // 获取androidinfo数组中的内容 var info = androidinfo[0]; return ( <View style={styles.container}> <Text> {info.title} </Text> <Text> {info.year} </Text> <Image source={{uri: info.pic.thumbnail}} style={styles.thumbnail} /> </View> ); } });
可以看到,这里整个显示的样式是container,通过
<Text>组件来显示文字,以及
<Image />组件来显示图片
完整的代码如下:
[code]/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var androidinfo = [ {title: 'android', year: '2016', pic: {thumbnail: 'https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/logo/logo201509091.png'}}, ]; var { AppRegistry, StyleSheet, Text, Image, View, } = React; var firstProject = React.createClass({ render: function() { var info = androidinfo[0]; return ( <View style={styles.container}> <Text> {info.title} </Text> <Text> {info.year} </Text> <Image source={{uri: info.pic.thumbnail}} style={styles.thumbnail} /> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 190, height: 60, }, }); AppRegistry.registerComponent('firstProject', () => firstProject);
此时点击menu->reload js,效果如下:
相关文章推荐
- ReactJS入门教程
- windows下搭建react native开发环境
- React-Native之ViewPagerAndroid的使用
- JS/React 判断对象是否为空对象
- 初识React
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
- React入门 (一) 基本语法和功能介绍
- React Native开发的仿美团小demo
- React入门 (二) 创建一个评论模块
- React入门(四) 评论模块续-评论表单
- [转]ReactJS入门教程
- [深入ReactNative]第一篇 通讯及消息循环代码剖析
- 使用Jest对React-Native做单元测试
- [React Testing] Setting up dependencies && Running tests
- Angular与React的一些看法
- 在Windows下搭建React Native Android开发环境
- React 根据官方总结的规范
- Codeforces 607A Chain Reaction 【二分 + dp】
- 在Windows下搭建React-Native Android开发环境
- react-native 保存图片到本地