1.TabBarIOS->经典错误:不管是不是TabBarIOS,只要内部缺少组件都会报这个错误
2. NavigatorIOS + TabBarIOS 示例
import React, {Component} from 'react';
import {Platform, StyleSheet, Text,
View, Image, TextInput,
TouchableOpacity, ScrollView,
Dimensions, FlatList,TouchableHighlight,
TabBarIOS, NavigatorIOS} from 'react-native';
import Main from './Compment/Main'
import Message from './Compment/Message'
import Me from './Compment/ME'
import Find from './Compment/Find'
export default class App extends Component{
constructor(props){
super(props);
this.state = {
selectValue: 'home',
}
}
render(){
return(
<TabBarIOS>
<TabBarIOS.Item
selected = {this.state.selectValue == 'home'}
title="首页"
icon={require('./wangyiDemoImages/shouye.png')}
selectedIcon={require('./wangyiDemoImages/shouye-2.png')}
onPress={()=>this.setTap('home')}
>
<NavigatorIOS style={{flex:1}}
initialRoute={{
title:"网易",
//Main 其他的js 模块
component:Main
}}/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="发现"
icon={require('./wangyiDemoImages/faxian.png')}
selectedIcon={require('./wangyiDemoImages/faxian-2.png')}
onPress={()=>this.setTap('search')}
selected = {this.state.selectValue == 'search'}
>
<NavigatorIOS style={{flex:1}}
initialRoute={{
title:"发现",
//Find 其他的js 模块
component:Find
}}/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="消息"
icon={require('./wangyiDemoImages/xiaoxi.png')}
selectedIcon={require('./wangyiDemoImages/xiaoxi-2.png')}
onPress={()=>this.setTap('message')}
selected = {this.state.selectValue == 'message'}
>
<NavigatorIOS style={{flex:1}}
initialRoute={{
title:"消息",
//Find 其他的js 模块
component:Message
}}/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="我的"
icon={require('./wangyiDemoImages/wo.png')}
selectedIcon={require('./wangyiDemoImages/wo-2.png')}
onPress={()=>this.setTap('me')}
selected = {this.state.selectValue == 'me'}
>
<NavigatorIOS style={{flex:1}}
initialRoute={{
title:"我的",
//Find 其他的js 模块
component:Me
}}/>
</TabBarIOS.Item>
</TabBarIOS>
)
}
setTap = (value) => {
this.setState({
selectValue: value
});
}
}
var styles= StyleSheet.create({
})
3. React Native 的调试方法
4.fetch 网络请求
componentDidMount() {
this.loadDataFromNet();
}
loadDataFromNet(){
fetch(this.state.api_url)
//网络请求转成json
.then(response => response.json())
//responseJson接收转成的json数据
.then(responseJson => {
console.log(responseJson)
})
.catch(error => {
console.error(error);
});
}
4. 含有导航的界面跳转
//实现界面跳转 /* * passProps 传递的参数会隐士的传递到下一个界面,在下一个界面取值的方法是this.props.param * */ pushToNewDetail(param){ this.props.navigator.push({ title:'详情页', component:NewsDetail, passProps:{param} }) }