React native 初探
来源：互联网 发布：sql2008数据库置疑 编辑：程序博客网 时间：2024/04/20 13:46
参考文档：
首先参考前辈的对比文章，分析的透彻,深度好文：
http://blog.csdn.net/yczz/article/details/50468181
中文社区：
http://reactnative.cn/
ECMAScript 6:
http://es6.ruanyifeng.com/
FlexBox:
http://www.w3cplus.com/css3/a-guide-to-flexbox.html
调试比较快的模拟器下载地址：
Genymotion，对个人用户免费，看清楚要下载的选项
http://genymotion.en.softonic.com/
react jsx教程：
http://reactjs.cn/react/docs/tutorial.html
按各种文档开始实际学习预演，过程记录如下：
第一次运行react-native run-android
命令运行中间需要下载安装gradle-2.4-all.zip这个文件，可能需要科学上网，下载速度比较慢，我尝试了3天才下载成功，一度感觉这东西压根不能用。
命令时出现
解决办法：
adbshell input keyevent 82
选择 Dev Settings 菜单
点击：Debug server host &port for device菜单：
设置为本地连接，一般在运行react-native run-android命令后会显示相关信息，自己看明白后填写。
设置完成后再次运行：adb shell input keyevent 82命令：
选择 Reload：成功的画面出现了
具官方文档说运行命令：adb logcat *:S ReactNative:V ReactNativeJS:V
可以查看日志，以下是输出：表示看不懂的样子
预演ScrollView代码：
/**
*Sample React Native App
*https://github.com/facebook/react-native
*@flow
*/
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text,View, TextInput, ScrollView,Image } from 'react-native';
/**
* 主入口类
*/
class Bi extends Component {
render() {
return (
<ScrollView>
<Viewstyle={{flex: 1,alignItems:'flex-start'}}>
<Textstyle={{fontSize: 30}}>文字信息</Text>
<Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View>
<Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View>
<Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View>
<Textstyle={{fontSize: 30}}>文字信息</Text>
<Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Text style={{flex:1,fontSize:16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View>
<Textstyle={{fontSize: 30}}>文字信息</Text>
<Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View>
<Textstyle={{fontSize: 30}}>文字信息</Text>
<Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View><Viewstyle={{flex:1,flexDirection: 'row',alignItems:'center'}}>
<Imagestyle={{margin:5,width:100,height:100}} source={require('./img/1.png')}/>
<Textstyle={{flex:1,fontSize: 16}}>可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗可爱的小狗</Text>
</View>
</View>
</ScrollView>
);
}
}
AppRegistry.registerComponent('Bi', ()=> Bi);
执行效果如下：
ListView预演：
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text,View, TextInput, ScrollView,Image,PixelRatio, ListView } from 'react-native';
/**
* 主入口类
*/
class Bi extends Component {
//初始化模拟数据
constructor(props){
super(props);
constds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
this.state= {
dataSource:ds.cloneWithRows([
'John','Joel','James','Jimmy','Jackson','Jillian',
'Julie','Devin'
])
};
}
render() {
return (
<Viewstyle={{paddingTop: 22}}>
<ListView
dataSource= {this.state.dataSource}
renderRow= {(rowData)=><Text>{rowData}</Text>}
/>
</View>
);
}
}
AppRegistry.registerComponent('Bi', ()=> Bi);
原生组件验证：
下图为开发者模式下，打开组建边界效果，可以看到listview在手机上执行的确是原生的组件
请求网络数据作为ListView的数据源：
/**
*Sample React Native App
*https://github.com/facebook/react-native
*@flow
*/
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text,View, TextInput, ScrollView,Image,PixelRatio, ListView } from 'react-native';
/**
* 主入口类
*/
class Bi extends Component {
//初始化模拟数据
constructor(props){
super(props);
//varinfo = ['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie','Devin'];
//constds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state= {
dataSource:new ListView.DataSource({
rowHasChanged:(r1, r2) => r1 !== r2,
}),
loaded:false,
//dataSource:ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian','Julie', 'Devin'])
};
//this.fetchData();
//this.setState({
// dataSource:this.state.dataSource.cloneWithRows(info);
//});
this.fetchData= this.fetchData.bind(this);
}
componentDidMount(){
this.fetchData();
}
fetchData(){
//this.setState({
// dataSource:this.state.dataSource.cloneWithRows(
// ['John', 'Joel', 'James', 'Jimmy','Jackson', 'Jillian', 'Julie', 'Devin']),
// loaded: true,
//});
fetch("http://192.168.1.124/dubang/movies.json")//本机地址，返回json
.then((response)=> response.json())
.then((responseData)=> {
this.setState({
dataSource:this.state.dataSource.cloneWithRows(responseData.movies)
});
})
.done();
}
render() {
return (
<Viewstyle={{paddingTop: 22}}>
<ListView
dataSource= {this.state.dataSource}
renderRow= {(rowData) => <Text> {rowData.title} </Text>}
/>
</View>
);
}
}
AppRegistry.registerComponent('Bi', ()=> Bi);
补充：实现1像素高度设置的方法：height:1/PixelRatio.get()
- Facebook React Native 初探
- react-native初探
- 初探React Native
- React Native HelloWorld初探
- React native 初探
- react-native-Animated初探
- React Native桥接器初探
- 《React-Native系列》1、初探React-Native
- React Native for Android初探
- React Native for Android 初探
- React Native For Android初探
- 初探react-native Hello World
- Android工程师初探React-Native
- 初探React-native （二）
- [深入剖析React Native]React 初探
- React Native使用初探 --------- OpenGL应用
- React Native For Android 架构初探
- React Native For Android 架构初探
- Android中TextView多种颜色的设置
- $.ajax
- Maven（1）——（本地仓库，远程仓库）
- mysql 允许远程主机连接
- 喜马拉雅面试题总结
- React native 初探
- PAT甲级练习题A1017. Queueing at Bank (25)
- 理论实战K邻近法
- 北京市规划委员会通州分局
- 通州新城规划图 - 新通网http://www.xintongwang.com
- 用Lingo时查的一些东西
- Docker的Web UI管理：shipyard+swarm-（手动）安装&试用
- Ubuntu16.04+caffe+keras+tensorflow+GPU +matlab 安装资源查看
- CListCtrl 用法
