React Native ——入门环境搭配以及简单实例
2024-09-24 16:29:07
一、Homebrew 是OS X 的套件管理器。
首先我们需要获取 Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1、我们可以先通过在终端输入: brew -v
如果没有安装就输入Homebrew的镜像路径去下载
2、拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果提示 already installed说明已经下载过了
3、下载watchman,终端输入:brew install watchman,它是用来检测文件变化的一个工具,如果提示 already installed说明已经下载过了
4、然后可以下载flow,终端输入:bre install flow ,它是用来检测jsx语法的工具,如果提示 already installed说明已经下载过了
5、安装完依赖之后,我们就通过npm来安装react Native的命令行工具,终端输入:npm install -g react-native-cli
6、这个时候我们就可以通过命令行来创建一个HelloWorld:react-native init HelloWorld ,过程会比较久一点呐
如果确实是太久,那就应该是npm加载的问题啦,可以换成淘宝的镜像(http://npm.taobao.org/),终端输入:
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
7、又或者是要取得权限,终端输入:sudo react-native init HelloWorld
二、demo。
1、demo1:首页显示一张图片和文字,图片不能仅仅通过构建控件,还需要设置宽高[通过index.ios.js文件进行修改]
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';//表示在严格模式下的JS文件 var React = require('react-native');//定义react组件的依赖 //demo:增加一个Image属性
var MOCKED_MOVIES_DATA = [
{title: 'myTitle', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
//等同于 var React = AppRegistry;这样的简化,这是ES6的写法
//每一个属性对应的是React里面提供的组件
var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
} = React; var HellWorld = React.createClass({
render: function() { var movie = MOCKED_MOVIES_DATA[0]; return (
<View style={styles.container}> <Text >{movie.title}</Text> <Image
source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}
/> </View>
);
}
}); var styles = StyleSheet.create({
container: {
flex: 1, //flexbox
justifyContent: 'center', //垂直居中
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail:{
width:53,
height:90, //长度无单位,默认PT
},
}); //注册组件:ES6的写法,引号内是组件名字,后面是返回对应的组件
AppRegistry.registerComponent('HellWorld', () => HellWorld);
2、demo2:在1 的基础上构造一个列表,通过网络数据请求动态绑定
/**
* Sample React Native App
* http://www.cnblogs.com/daomul/
*/
'use strict'; /*网络请求URL*/
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; var React = require('react-native'); var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
ListView,
} = React; var HellWorld = React.createClass({ getInitialState:function(){
return {
dataSource:new ListView.DataSource({
rowHasChanged: (row1,row2) => row1 !== row2
}),
loaded:false,
}
},
componentDidMount:function(){
this.fetchData();
},
render: function() {
if (this.state.loaded) {
return this.renderList();
}else {
return this.renderLoadingView();
}
},
renderList:function(){
return (<ListView
dataSource={this.state.dataSource}
renderRow={this.renderListItem}
style={styles.listView}
/>);
},
renderListItem:function(movie){
return <View style={styles.container}> <Image
source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>;
},
renderLoadingView:function(){
return <View style={styles.listView}>
<Text>loading.....</Text>
</View>;
}, //负责数据的抓取
fetchData:function(){
fetch(REQUEST_URL)
.then((response)=>response.json())
.then((responseData)=>{
this.setState({
dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
loaded:true,
});
})
.done();/*调用.done不然有错误信息会被吃掉的*/
},
}); /*flexDirection:'row' 子容器按照水平方向来flex*/
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection:'row',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail:{
width:53,
height:90,
},
rightContainer:{
flex:1,
},
title:{
fontSize:20,
marginBottom:8,
textAlign:'center',
},
year:{
textAlign:'center',
},
listView:{
paddingTop:20,
backgroundColor:'#F5FCFF',
}
}); AppRegistry.registerComponent('HellWorld', () => HellWorld);
最新文章
- C# 本质论 第二章 数据类型
- NTFS交换数据流隐写的应用
- 表单验证神器——jquery.validate插件
- sqlite3常用命令&;语法
- Objective C 基础
- 【转】linux之e2label命令
- 【CLR】奇妙的String
- flv视频播放器代码
- [置顶] 内存映射失败MapViewOfFile 失败 返回 8
- 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛
- Spring Boot实战之逐行释义HelloWorld
- CPU或以太网模块重启DHCP请求
- ✔ OI Diary ★
- Surface Pro 4 系统优化全教程及QA
- adb 常用命名
- particles.js中文开发手册
- SAP PA认证
- phpstrom2018
- java 根据日期获取星期
- Android ViewDragHelper全然解析 自己定义ViewGroup神器
热门文章
- selenium 单浏览器模式
- Java按钮控件数组实现计算器界面
- Linux下 PHP 安装pecl_http方法
- >;>;和<;<;<;区别
- psutil的使用
- U3D调用7z解压文件
- [Python] First-class Everything (Python缔造者Guido van Rossum关于bound/unbound method的来历叙述)
- Linux chmod和chown更改文件目录的所属者命令的用法
- Stay hungry, Stay foolish 的原义
- Java实现简单的正则表达式匹配