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