1.屏幕分辨率

//引入
var Dimensions = require('Dimensions');<View style={styles.outViewStyle}><Text> 当前屏幕的宽度：{Dimensions.get('window').width}</Text><Text> 当前屏幕的高度：{Dimensions.get('window').height}</Text><Text> 当前屏幕的分辨率：{Dimensions.get('window').scale}</Text></View>

2.图片的加载 <Image>

          //在项目中建立img文件夹，图片放入其中<Text>1.从本地加载图片</Text><Image source={require('./img/icon.png')} style={styles.imageStyle}/><Text>2.加载网络图片</Text><Image source={{uri:'http://img.ivsky.com/img/tupian/pre/201804/02/guaiqiao_xiaomao-005.jpg'}} style={styles.imageStyle}/><Text>3.从资源包中加载图片</Text>//图片放在ios项目中的Images.xcassets里面，11为图片名字<Image source = {{uri:'11'}} style={styles.imageStyle}/><Text>4.用图片当做背景</Text><ImageBackgroundsource={{uri:'http://img.ivsky.com/img/tupian/pre/201804/02/guaiqiao_xiaomao-005.jpg'}} style={styles.imageStyle}><Text style={{marginTop:40, backgroundColor:'transparent'}}> 可爱的小猫咪</Text></ImageBackground>imageStyle:{//width:150,//height:200,//圆角//borderRadius:10,//resizeMode:'cover',flex:1},

小demo：

代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, ImageBackground} from 'react-native';//导入本地js数据
var BadgeData = require('./BadgeData.json');
//引入
var Dimensions = require('Dimensions');
//定义全局变量
var {width} = Dimensions.get('window');
//每行的个数
var clos = 3;
//每个View的宽度
var boxWidth = 100;
//View之间的间隙
var vMargin = (width-clos*boxWidth)/(clos+1);
//顶部距离
var hMargin = 25;const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',android:'Double tap R on your keyboard to reload,\n' +'Shake or press menu button for dev menu',
});type Props = {};
export default class App extends Component<Props> {render() {return (<View style={styles.container}>{this.renderAllBadge()}</View>);}//不是常量，必须要用{} 括起来//返回所有的包renderAllBadge(){//定义一个数组，装所有子组件var allBage = [];//便利json数据for (var i=0; i<BadgeData.data.length; i++){//取出单独的数据对象var badge = BadgeData.data[i];//直接转入数组allBage.push(<View key={i} style={styles.outViewStyle}><Image style={styles.imageStyle} source={{uri:badge.icon}}/><Text style={styles.mainTitleStyle}>{badge.title}</Text></View>);}
//返回数组return allBage;}}const styles = StyleSheet.create({container: {//改变主轴的方向//flexDirection:'row',//上边距// marginTop:30,//设置主轴的对其方式//justifyContent:'flex-start',//定义侧轴对其方式//alignItems:'center',//显示不全，换行显示// flexWrap:'wrap-reverse',//backgroundColor:'#f5fcff',//flex:1,flexDirection:'row',flexWrap:'wrap'},outViewStyle:{backgroundColor:'gray',//设置侧轴对其方式alignItems:'center',width:boxWidth,height:boxWidth,marginLeft:vMargin,marginTop:hMargin,},imageStyle:{width:80,height:80,},mainTitleStyle:{},innerViewStyle:{backgroundColor:'green',width:200,height:50,},innerViewStyle2:{backgroundColor:'yellow',width:100,},});//BadgeData.json
{"data":[{"icon" : "danjianbao","title" : "单肩包"},{"icon" : "liantiaobao","title" : "链条包"},{"icon" : "qianbao","title" : "钱包"},{"icon" : "shoutibao","title" : "手提包"},{"icon" : "shuangjianbao","title" : "双肩包"},{"icon" : "xiekuabao","title" : "斜挎包"}]
}//图片放在ios的Images.xcassets里面，BadgeData.json里面icon对应相应的图片名字

3.文本框展示 <TextInput>

4.获取DOM点

<View style={styles.container} ref="topView">

//拿到view
this.refs.topView

5.滚动视图<ScrollView>

             //横向滚动horizontal={true}//隐藏滚动条showsHorizontalScrollIndicator={false}//自动分页pagingEnabled={true}//一帧滚动结束onMomentumScrollEnd = {(e) =>this.onScrollAnimationEnd(e)}//开始拖动onScrollBeginDrag = {this.onScrollBeginDrag.bind(this)}//停止拖拽onScrollEndDrag = {this.onScrollEndDrag.bind(this)}

小demo：简单是图片轮播图

/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import { StyleSheet, View, Text, ScrollView, Image} from 'react-native';//引入计时器类库
import TimerMixin from '../node_modules/react-timer-mixin';
//引入json数据
import ImageData from '../ImageData.json';
//引入Dimensions文件
var Dimensions = require('Dimensions');var {width} = Dimensions.get('window');class TestScrollView extends React.Component{//注册定时器//  mixins:[TimerMixin]constructor(props){super(props);//当前的页码this.state = { currentPagePoint:0 };//定义定时器var timer1 = null;//设置固定值timeDuration = 1000;}//返回所有的图片renderAllImage(){//数组var allImages = [];//拿到图形数组var imagesArr = ImageData.data;//便利数组for(var i=0;  i<imagesArr.length; i++){//取出单独是对象var imgItem = imagesArr[i];//创建组件装入数组allImages.push(<Image key ={i}source={{uri:imgItem.img}}style={{width:width, height:width*0.5,}}//resizeMode:'contain'/>);}//返回数组return allImages;}//返回5个人圆点renderFivePoint(){//定义一个数组放置所有的圆点var indicatorArr = [];var pointStyle;//拿到图片的数组var imgsArr = ImageData.data;//遍历for(var  i=0; i<imgsArr.length; i++){//判断pointStyle = (i==this.state.currentPagePoint) ?{color:'orange'} :{color:'#ffffff'}//把圆点装入数组indicatorArr.push(<Text key={i} style={[{fontSize:25}, pointStyle]}>&bull;</Text>);}return indicatorArr;}//当一帧滚动结束是调用onScrollAnimationEnd(e){//1.求出水平方向的偏移量var offsetX = e.nativeEvent.contentOffset.x;//2.根据偏移量求出当前的页数var currentPage = Math.floor(offsetX/width);//3.更新状态机，重新绘制UIthis.setState({currentPagePoint:currentPage});}//实现一些复杂操作componentDidMount() {//开启定时器this.startTimer();}//开启定时器startTimer(){//1.拿到scrollViewvar scrollView = this.refs.scrollView;//拿到数组边界值var imgCount = ImageData.data.length;//2.添加定时器this.timer1 = setInterval(()=>{//2.1设置圆点var activePage = 0;//2.2 判断if((this.state.currentPagePoint+1) >= imgCount){//越界activePage = 0;}else {activePage = this.state.currentPagePoint+1;}//2.3更新状态机this.setState({currentPagePoint:activePage});//2.4scrollView滚动var offSetX = activePage * width;scrollView.scrollResponderScrollTo({x:offSetX, y:0, animated:true});}, timeDuration);}//开始拖拽调用onScrollBeginDrag(){//停止定时器clearInterval(this.timer1);}//停止拖拽onScrollEndDrag(){//开启定时器this.startTimer();}render(){return(<View style={styles.container}><ScrollViewref="scrollView"//横向滚动horizontal={true}//隐藏滚动条showsHorizontalScrollIndicator={false}//自动分页pagingEnabled={true}//一帧滚动结束onMomentumScrollEnd = {(e) =>this.onScrollAnimationEnd(e)}//开始拖动onScrollBeginDrag = {this.onScrollBeginDrag.bind(this)}//停止拖拽onScrollEndDrag = {this.onScrollEndDrag.bind(this)}>{this.renderAllImage()}</ScrollView>{/*返回指示器*/}<View style={styles.pageViewStyle}>{/*返回5个圆点*/}{this.renderFivePoint()}</View></View>);}}const styles = StyleSheet.create({container:{marginTop:40,// backgroundColor:'red',},pageViewStyle:{width:width,height:30,backgroundColor:'rgba(0, 0, 0, 0.4)',//定位position:'absolute',bottom:0,//设置主轴方向flexDirection:'row',//设置侧轴对齐方式alignItems:'center',},
});export {TestScrollView as default};

6.列表视图<ListView>

/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import { StyleSheet, View, Image, Text, ListView, TouchableOpacity, AlertIOS} from 'react-native';//导入数据源
//import Wine from "../Wine";var Car = require('../Car.json');
//引入
let Dimensions = require('Dimensions');//定义全局变量
let {width, height} = Dimensions.get('window');class CarListView extends React.Component {constructor(props){super(props);let getSectionData ;getSectionData  = (dataBlob, sectionID) =>{return dataBlob[sectionID];}let getRowData;getRowData = (dataBlob, sectionID, rowID) => {return dataBlob[sectionID + ':' + rowID];};//1.1设置数据源this.state ={dataArr : new ListView.DataSource({getSectionData:getSectionData,//获取组中的数据getRowData:getRowData,//获取行中的数据rowHasChanged:(r1, r2) => r1 !== r2,sectionHeaderHasChanged:(s1, s2) => s1 !== s2,}),}}//复杂的操作：数据请求，异步操作（定时器）componentDidMount() {//调用js数据this.loadDataFromJson();}//调用js数据loadDataFromJson(){//拿到json数据let jsonData = Car.data;//定义一些变量let dataBlob = {};sectionIDs = [];rowIDs = [];carsArr =[];//便利for (var i=0; i<jsonData.length; i++){//1.把组号 放入数组中sectionIDs.push(i);//2.把组中的内容放到dataBlob对象中dataBlob[i] = jsonData[i].title;//3.取出改组中所有的车carsArr = jsonData[i].cars;rowIDs[i] = [];//4便利所有的车数组for (var j=0; j<carsArr.length; j++){//把行号放入rowIDsrowIDs[i].push(j);//把每一行中的内容放入dataBlob中dataBlob[i +':' +j] = carsArr[j];}}//更新状态this.setState({dataArr :this.state.dataArr.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)});}//设置render函数render() {return (<View style={styles.outerViewStyle}>{/*头部*/}<View style={styles.headerViewStyle}><Text style={{color:'white', fontSize:25}}> SeeMyGo品牌</Text></View><ListViewdataSource={this.state.dataArr}renderRow={this.renderRow}renderSectionHeader={this.renderSection}/></View>);}//每一行的数据renderRow(rowData){return(<TouchableOpacity activeOpacity={0.5}><View style={styles.rowStyle}><Image source={{uri:rowData.icon}} style={styles.rowImgeStyle}/><Text style={{marginLeft:5}}>{rowData.name}</Text></View></TouchableOpacity>);}//每一组中的数据renderSection(sectonData, sectionID){return(<View style={styles.sectionHeaderStyle}><Text style={{fontSize:20, marginLeft:5,paddingTop:6}}> {sectonData} </Text></View>);}
}const styles = StyleSheet.create({outerViewStyle:{flex:1,},headerViewStyle:{height:64,backgroundColor:'orange',justifyContent:'center',alignItems:'center'},rowStyle:{//设置主轴方向flexDirection:'row',//侧轴方向居中alignItems:'center',padding:10,borderBottomColor:'#e8e8e8',borderBottomWidth:0.5,},rowImgeStyle:{width:80,height:90,},sectionHeaderStyle:{backgroundColor:'#e8e8e8',height:40,// justifyContent:'center',// paddingTop:10,},});export {CarListView as default};Car.js 文件
{"data": [{"cars": [{"icon": "m_180_100.png","name": "AC Schnitzer"},{"icon": "m_92_100.png","name": "阿尔法·罗密欧"},{"icon": "m_9_100.png","name": "奥迪"},{"icon": "m_97_100.png","name": "阿斯顿·马丁"}],"title": "A"},{"cars": [{"icon": "m_172_100.png","name": "巴博斯"},{"icon": "m_157_100.png","name": "宝骏"},{"icon": "m_3_100.png","name": "宝马"},{"icon": "m_82_100.png","name": "保时捷"},{"icon": "m_163_100.png","name": "北京汽车"},{"icon": "m_211_100.png","name": "北汽幻速"},{"icon": "m_168_100.png","name": "北汽威旺"},{"icon": "m_14_100.png","name": "北汽制造"},{"icon": "m_2_100.png","name": "奔驰"},{"icon": "m_59_100.png","name": "奔腾"},{"icon": "m_26_100.png","name": "本田"},{"icon": "m_5_100.png","name": "标致"},{"icon": "m_127_100.png","name": "别克"},{"icon": "m_85_100.png","name": "宾利"},{"icon": "m_15_100.png","name": "比亚迪"},{"icon": "m_135_100.png","name": "布加迪"}],"title": "B"},{"cars": [{"icon": "m_129_100.png","name": "昌河"}],"title": "C"},{"cars": [{"icon": "m_113_100.png","name": "道奇"},{"icon": "m_165_100.png","name": "大通"},{"icon": "m_8_100.png","name": "大众"},{"icon": "m_27_100.png","name": "东风"},{"icon": "m_197_100.png","name": "东风风度"},{"icon": "m_141_100.png","name": "东风风神"},{"icon": "m_115_100.png","name": "东风风行"},{"icon": "m_205_100.png","name": "东风小康"},{"icon": "m_29_100.png","name": "东南"},{"icon": "m_179_100.png","name": "DS"}],"title": "D"},{"cars": [{"icon": "m_91_100.png","name": "法拉利"},{"icon": "m_199_100.png","name": "飞驰商务车"},{"icon": "m_164_100.png","name": "菲斯克"},{"icon": "m_40_100.png","name": "菲亚特"},{"icon": "m_7_100.png","name": "丰田"},{"icon": "m_67_100.png","name": "福迪"},{"icon": "m_190_100.png","name": "弗那萨利"},{"icon": "m_208_100.png","name": "福汽启腾"},{"icon": "m_17_100.png","name": "福特"},{"icon": "m_128_100.png","name": "福田"}],"title": "F"},{"cars": [{"icon": "m_109_100.png","name": "GMC"},{"icon": "m_110_100.png","name": "光冈"},{"icon": "m_147_100.png","name": "广汽"},{"icon": "m_63_100.png","name": "广汽吉奥"},{"icon": "m_133_100.png","name": "广汽日野"},{"icon": "m_182_100.png","name": "观致汽车"}],"title": "G"},{"cars": [{"icon": "m_31_100.png","name": "哈飞"},{"icon": "m_196_100.png","name": "哈弗"},{"icon": "m_170_100.png","name": "海格"},{"icon": "m_32_100.png","name": "海马"},{"icon": "m_149_100.png","name": "海马商用车"},{"icon": "m_181_100.png","name": "恒天汽车"},{"icon": "m_58_100.png","name": "红旗"},{"icon": "m_52_100.png","name": "黄海"},{"icon": "m_112_100.png","name": "华泰"},{"icon": "m_45_100.png","name": "汇众"}],"title": "H"},{"cars": [{"icon": "m_35_100.png","name": "江淮"},{"icon": "m_37_100.png","name": "江铃"},{"icon": "m_38_100.png","name": "江南"},{"icon": "m_98_100.png","name": "捷豹"},{"icon": "m_143_100.png","name": "吉利帝豪"},{"icon": "m_144_100.png","name": "吉利全球鹰"},{"icon": "m_148_100.png","name": "吉利英伦"},{"icon": "m_39_100.png","name": "金杯"},{"icon": "m_57_100.png","name": "金龙联合"},{"icon": "m_161_100.png","name": "金旅客车"},{"icon": "m_152_100.png","name": "九龙"},{"icon": "m_4_100.png","name": "Jeep"}],"title": "J"},{"cars": [{"icon": "m_188_100.png","name": "卡尔森"},{"icon": "m_107_100.png","name": "凯迪拉克"},{"icon": "m_150_100.png","name": "开瑞"},{"icon": "m_51_100.png","name": "克莱斯勒"},{"icon": "m_145_100.png","name": "科尼塞克"},{"icon": "m_212_100.png","name": "KTM"}],"title": "K"},{"cars": [{"icon": "m_86_100.png","name": "兰博基尼"},{"icon": "m_200_100.png","name": "蓝海房车"},{"icon": "m_80_100.png","name": "劳斯莱斯"},{"icon": "m_94_100.png","name": "雷克萨斯"},{"icon": "m_99_100.png","name": "雷诺"},{"icon": "m_146_100.png","name": "莲花"},{"icon": "m_153_100.png","name": "猎豹汽车"},{"icon": "m_76_100.png","name": "力帆"},{"icon": "m_16_100.png","name": "铃木"},{"icon": "m_166_100.png","name": "理念"},{"icon": "m_95_100.png","name": "林肯"},{"icon": "m_36_100.png","name": "陆风"},{"icon": "m_96_100.png","name": "路虎"},{"icon": "m_83_100.png","name": "路特斯"}],"title": "L"},{"cars": [{"icon": "m_183_100.png","name": "迈凯伦"},{"icon": "m_93_100.png","name": "玛莎拉蒂"},{"icon": "m_18_100.png","name": "马自达"},{"icon": "m_79_100.png","name": "MG"},{"icon": "m_81_100.png","name": "MINI"},{"icon": "m_201_100.png","name": "摩根"}],"title": "M"},{"cars": [{"icon": "m_155_100.png","name": "纳智捷"}],"title": "N"},{"cars": [{"icon": "m_104_100.png","name": "欧宝"},{"icon": "m_84_100.png","name": "讴歌"},{"icon": "m_171_100.png","name": "欧朗"}],"title": "O"},{"cars": [{"icon": "m_156_100.png","name": "启辰"},{"icon": "m_43_100.png","name": "庆铃"},{"icon": "m_42_100.png","name": "奇瑞"},{"icon": "m_28_100.png","name": "起亚"}],"title": "Q"},{"cars": [{"icon": "m_30_100.png","name": "日产"},{"icon": "m_78_100.png","name": "荣威"},{"icon": "m_142_100.png","name": "瑞麒"}],"title": "R"},{"cars": [{"icon": "m_25_100.png","name": "三菱"},{"icon": "m_209_100.png","name": "山姆"},{"icon": "m_195_100.png","name": "绅宝"},{"icon": "m_50_100.png","name": "双环"},{"icon": "m_102_100.png","name": "双龙"},{"icon": "m_111_100.png","name": "斯巴鲁"},{"icon": "m_10_100.png","name": "斯柯达"},{"icon": "m_89_100.png","name": "smart"}],"title": "S"},{"cars": [{"icon": "m_202_100.png","name": "泰卡特"},{"icon": "m_189_100.png","name": "特斯拉"}],"title": "T"},{"cars": [{"icon": "m_140_100.png","name": "威麟"},{"icon": "m_186_100.png","name": "威兹曼"},{"icon": "m_19_100.png","name": "沃尔沃"},{"icon": "m_48_100.png","name": "五菱"}],"title": "W"},{"cars": [{"icon": "m_13_100.png","name": "现代"},{"icon": "m_174_100.png","name": "星客特"},{"icon": "m_71_100.png","name": "新凯"},{"icon": "m_87_100.png","name": "西雅特"},{"icon": "m_49_100.png","name": "雪佛兰"},{"icon": "m_6_100.png","name": "雪铁龙"}],"title": "X"},{"cars": [{"icon": "m_194_100.png","name": "扬州亚星客车"},{"icon": "m_138_100.png","name": "野马汽车"},{"icon": "m_100_100.png","name": "英菲尼迪"},{"icon": "m_53_100.png","name": "一汽"},{"icon": "m_41_100.png","name": "依维柯"},{"icon": "m_75_100.png","name": "永源"}],"title": "Y"},{"cars": [{"icon": "m_136_100.png","name": "长安轿车"},{"icon": "m_159_100.png","name": "长安商用"},{"icon": "m_21_100.png","name": "长城"},{"icon": "m_203_100.png","name": "之诺"},{"icon": "m_60_100.png","name": "中华"},{"icon": "m_167_100.png","name": "中欧"},{"icon": "m_77_100.png","name": "众泰"},{"icon": "m_204_100.png","name": "中通客车"},{"icon": "m_33_100.png","name": "中兴"}],"title": "Z"}]
}

7.标签栏<TabBarIOS>和导航栏<NavigatorIOS>

直接上demo：

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Text, TabBarIOS, NavigatorIOS } from 'react-native';//引入文件
import YNHome from './YNHome';
import YNFind from './YNFind';
import YNMessage from './YNMessage';
import YNMine from './YNMine';class YNMain extends React.Component{constructor(props){super(props);//被选中的itemthis.state = {selectTabBarItem:'home'}}render(){return(// 标签栏<TabBarIOStintColor='orange'>{/*首页*/}<TabBarIOS.Itemicon={{uri:'tabbar_home', scale:2}}selectedIcon={{uri:'tabbar_home_highlighted', scale:2}}title="首页"selected={ this.state.selectTabBarItem == 'home'}onPress={() => {this.setState({selectTabBarItem: 'home'})}}>{/*导航栏*/}<NavigatorIOSinitialRoute={{component:YNHome,title:'新闻'}}/></TabBarIOS.Item>{/*发现*/}<TabBarIOS.Itemicon={{uri: 'tabbar_discover', scale:2}}selectedIcon={{uri:'tabbar_discover_highlighted', scale:2}}title="发现"selected={ this.state.selectTabBarItem == 'discover'}onPress={() => {this.setState({selectTabBarItem: 'discover'})}}><NavigatorIOSinitialRoute={{component:YNFind,title:'发现'}}/></TabBarIOS.Item>{/*消息*/}<TabBarIOS.Itemicon={{uri: 'tabbar_message_center', scale:2}}selectedIcon={{uri:'tabbar_message_center_highlighted', scale:2}}title="消息"selected={ this.state.selectTabBarItem == 'message'}onPress={() => {this.setState({selectTabBarItem: 'message'})}}><NavigatorIOSinitialRoute={{component:YNMessage,title:'消息'}}/></TabBarIOS.Item>{/*我的*/}<TabBarIOS.Itemicon={{uri: 'tabbar_profile', scale:2}}selectedIcon={{uri:'tabbar_profile_highlighted', scale:2}}title="我的"selected={ this.state.selectTabBarItem == 'mine'}onPress={() => {this.setState({selectTabBarItem: 'mine'})}}><NavigatorIOSinitialRoute={{component:YNMine,title:'我的'}}/></TabBarIOS.Item></TabBarIOS>);}
}const styles = StyleSheet.create({});
export {YNMain as default};