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>
<ImageBackground
source={{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]}>•</Text>
);
}
return indicatorArr;
}
//当一帧滚动结束是调用
onScrollAnimationEnd(e){
//1.求出水平方向的偏移量
var offsetX = e.nativeEvent.contentOffset.x;
//2.根据偏移量求出当前的页数
var currentPage = Math.floor(offsetX/width);
//3.更新状态机,重新绘制UI
this.setState({
currentPagePoint:currentPage
});
}
//实现一些复杂操作
componentDidMount() {
//开启定时器
this.startTimer();
}
//开启定时器
startTimer(){
//1.拿到scrollView
var 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}>
<ScrollView
ref="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++){
//把行号放入rowIDs
rowIDs[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>
<ListView
dataSource={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);
//被选中的item
this.state = {
selectTabBarItem:'home'
}
}
render(){
return(
// 标签栏
<TabBarIOS
tintColor='orange'
>
{/*首页*/}
<TabBarIOS.Item
icon={{uri:'tabbar_home', scale:2}}
selectedIcon={{uri:'tabbar_home_highlighted', scale:2}}
title="首页"
selected={ this.state.selectTabBarItem == 'home'}
onPress={() => {
this.setState({selectTabBarItem: 'home'})
}}
>
{/*导航栏*/}
<NavigatorIOS
initialRoute={{
component:YNHome,
title:'新闻'
}}
/>
</TabBarIOS.Item>
{/*发现*/}
<TabBarIOS.Item
icon={{uri: 'tabbar_discover', scale:2}}
selectedIcon={{uri:'tabbar_discover_highlighted', scale:2}}
title="发现"
selected={ this.state.selectTabBarItem == 'discover'}
onPress={() => {
this.setState({selectTabBarItem: 'discover'})
}}
>
<NavigatorIOS
initialRoute={{
component:YNFind,
title:'发现'
}}
/>
</TabBarIOS.Item>
{/*消息*/}
<TabBarIOS.Item
icon={{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'})
}}
>
<NavigatorIOS
initialRoute={{
component:YNMessage,
title:'消息'
}}
/>
</TabBarIOS.Item>
{/*我的*/}
<TabBarIOS.Item
icon={{uri: 'tabbar_profile', scale:2}}
selectedIcon={{uri:'tabbar_profile_highlighted', scale:2}}
title="我的"
selected={ this.state.selectTabBarItem == 'mine'}
onPress={() => {
this.setState({selectTabBarItem: 'mine'})
}}
>
<NavigatorIOS
initialRoute={{
component:YNMine,
title:'我的'
}}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
const styles = StyleSheet.create({
});
export {YNMain as default};