React Native 学习从0至1-第三篇

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}
        })
}