React Native入门教程2 -- 基本组件使用及样式
来源:互联网 发布:吾爱源码官网解压密码 编辑:程序博客网 时间:2024/06/03 14:34
在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给我们的乐趣。
欢迎加入React Native讨论群:120663591
由于我也没怎么接触过js和css,所以就用自己的方式来学习,所以文章中有错误在所难免,如果您发现了错误,请及时在文章底下评论。我个人比较合适的学习方式是直接开发,遇到什么不会就去查,先把大概怎么写混熟,等到可以熟练写出程序之后,再去重新跟着基础查漏补缺。 这样做的原因是,对于初学者,直接给出许多属性,是记不住的,系统的学下来之后,如果没有大量联系,最终只有忘记,所以给自己一个编程的环境,告诉自己在开发,而不是单纯的学,这样也算是个捷径吧。
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/51810882
电影介绍界面
本次教程的项目使用的是facebook的官方例子来学习,是一个电影上映的界面,通过这个例子,你可以学习到基本组件的使用,以及样式的改写。官方文档链接
首先,打开我们init好的项目,可以看到有index.android.js和index.ios.js两个js文件,分别对应android的界面和ios的界面:
打开index.android.js,对其中初始化代码进行分析。
可以看到初始化代码基本分四个部分:
1.导入部分
2.视图部分
3.样式部分
4.注册部分
1.导入部分
//导入Reactimport React, { Component } from 'react';//导入各个组件import { AppRegistry, //注册器 StyleSheet, //style Text, //Text 相当于android的TextView TextInput, //输入框 相当于android的EditText View, //基本的视图容器 Image, //图片组件 相当于android的ImageView} from 'react-native';
此部分是将需要用的到组件导入,分别类似于:
#include "stdio.h" //c语言import com.wing.* //java语言
2.视图部分
class My extends Component { render() { return ( //设置一个跟容器 <View style={styles.container}> //设置3个文本组件,样式分别引用各自的style <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> ); }}
在这一部分,类似于Android的Activity,也就是一个程序的界面。对比Android来说呢,好比是Activity动态添加的View,也就是说视图的样式是默认的。他的样式由 styles(相当于Android的xml布局文件)决定。以上代码的意思就是说在主容器内添加了两个Text控件和一个Image控件,他们的样式分别由各自的style决定。
3.样式部分
//定义一个StyleSheet常量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, },});
此部分为各个组件的样式定义,语法上跟CSS大同小异,由于我也不太熟悉CSS的属性,所以用到的时候去查,多写几遍应该就记住了,孰能生巧嘛。
在此部分,相当于Android里面的xml文件,fontSize对应android:textSize。相信你很轻易就可以看明白。
4.注册部分
AppRegistry.registerComponent('WingProject', () => WingProject);
每个应用必须进行注册以后才可以渲染视图,每个APP只需要渲染一次即可。
开始制作第一款App,电影介绍
由于电影介绍,需要有电影的名称,年份,海报等。 所以我们现在本地模拟一个数据:
var MOVIES_DATA=[ { title: 'Warcraft', year: '2016', img: 'http: //b.hiphotos.baidu.com/baike/pic/item/b03533fa828ba61ed1b6ccc84634970a314e59f8.jpg' }];
由于在程序里使用到了Image等组件,所以需要进行导入
import React, { Component } from 'react';import { AppRegistry, StyleSheet, View, Image,} from 'react-native';
之后就可以编写界面,在容器里加入我们的组件。
class WingProject extends Component { render() { //获取模拟的电影数据 var movie = MOVIES_DATA[0]; return ( //添加主容器 并设置style <View style={styles.container}> //添加各个组件,并设置style <Text style = {styles.title}>{movie.title}</Text> <Text style = {styles.title}>{movie.year}</Text> <Image source={{uri:movie.img}} style = {styles.image} /> </View> ); }}
完成之后,接下来定义style
const styles = StyleSheet.create({//设置主容器的布局 container: { flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, //image必须设置大小,不然图片就不会显示 image:{ width:400, height:600, }, //设置字体大小为20 title:{ fontSize:20, }});
在程序的最后,对应用进行注册操作:
AppRegistry.registerComponent('WingProject', () => WingProject);
运行APP
编码已经完成,在cmder里键入 run-android命令运行以下试试吧!
可以看到APP已经运行了 界面如下:
哈哈 有木有很开熏~~~
如果你喜欢我的博客,请评论或者点击关注,谢谢!
下一篇: React Native入门教程 3 – Flex布局
- React Native入门教程2 -- 基本组件使用及样式
- React Native 原生UI组件的基本使用
- React Native常用组件样式总结
- React Native常用组件样式总结
- React-native View组件transform样式
- React Native使用原生组件
- React Native导航Navigator组件基本使用方法
- React Native导航Navigator组件基本使用方法
- React-Native 基础(四)使用style定义组件的样式
- React Native 之组件react-native-sound的使用
- react native组件封装及传值
- React Native官方入门教程
- React-Native进阶_1.抽取样式和组件
- React 组件基本使用(一)
- React 组件基本使用(二)
- Android React Native使用原生UI组件
- react-native图片组件的使用
- React Native 的 Navigator 组件使用方式
- android 布局
- C#的DateTime得到特定日期
- condition update在分布式系统中设计
- POST请求报错:Error Domain=NSCocoaErrorDomain Code=3840 "No string key for value in object around charact
- ubuntu 下安装redis2.8.17
- React Native入门教程2 -- 基本组件使用及样式
- C# 队列(Queue)
- win10 64位 环境下安装mysql5.7及登陆失败总结教程
- Android BitmapShader 实战 实现圆形、圆角图片——代码分析
- android TextView如何通过setCompoundDrawables调整文字和图片的位置(文字显示在图片内)?
- 老码农教你在 StackOverflow 上谈笑风生
- ubuntu中netstat命令的用法
- Xpath用法
- Media player控件常用属性