React-native框架（二）

重要知識點補充：

1.require(./) 當前目錄     require(../) 上級目錄

一、TabBarIOS和TabBarIOS.Item組件學習

效果圖:

gif.gif

代碼:

var TabBarIOSDemo = React.createClass({
//初始化函數
getInitialState(){
    return{
        selectedTabItem:'first'
 }},

//UI的布局函數
render(){
     return(
        <View style={styles.containerStyle}>
            <View style={styles.topTitleStyle}>
                <Text style={{fontSize: 20,backgroundColor:'red'}}>tabBar切換</Text>
            </View>
            <TabBarIOS>
                {/*第一部分*/} 
               <TabBarIOS.Item
                    systemIcon="history"
                    badge="6"
                    selected={this.state.selectedTabItem === "first"}
                   //selectedTarBarItem寫錯了,改為selectedTarItem   selectedTarItem寫錯了selectedTabItem
                    onPress={()=>{this.setState({selectedTabItem:'first'})}}
                >
                    <View style={styles.commonStyle}>
                        <Text>11</Text>
                    </View>
                </TabBarIOS.Item>

                {/*第二部分*/}
                <TabBarIOS.Item
                    systemIcon="search"
                    badge="8"
                    selected={this.state.selectedTabItem === "second"}
                    onPress={()=>{this.setState({selectedTabItem:'second'})}}
                >
                    <View style={styles.commonStyle}>
                        <Text>22</Text>
                    </View>
                </TabBarIOS.Item>

                {/*第三部分*/}
                <TabBarIOS.Item
                    systemIcon="contacts"
                    selected={this.state.selectedTabItem === "third"}
                    onPress={()=>{this.setState({selectedTabItem:'third'})}}
                >
                    <View style={styles.commonStyle}>
                        <Text>33</Text>
                    </View>
                </TabBarIOS.Item>

                {/*第四部分*/}
                <TabBarIOS.Item
                    systemIcon="more"
                    selected={this.state.selectedTabItem === "fourth"}
                    onPress={()=>{this.setState({selectedTabItem:'fourth'})}}
                >
                    <View style={styles.commonStyle}>
                        <Text>44</Text>
                    </View>
                </TabBarIOS.Item>
            </TabBarIOS>
        </View>
    );
}

//樣式的設置
const styles = StyleSheet.create({
    containerStyle:{
        flex:1,
    },
    topTitleStyle:{
        backgroundColor:'yellow',
        height:64,
        alignItems:'center',
        justifyContent:'center',
    },
    commonStyle:{ 
       alignItems:'center',
       justifyContent:'center', 
       flex:1 
   }
});

遇到的問題:

問題：代碼寫好之后，tabbar不能進行切換；
        自己犯了二個錯誤??:
        1)在初始化方法getInitialState中:selectedTabBarItem改為selectedTabItem
        2)selectedTarItem寫錯了，改為selectedTabItem

二、網絡請求

報錯信息:NetWork fail

解決方法：因為ios開發里面info.plist需要配置Allow Arbitrary Loads = YES,網絡請求即可

效果圖：

rn.gif

代碼：
index.ios.js：總模塊

import React, { Component } from 'react';
import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS} from 'react-native';
//引入外部的js文件
var Main = require('./Component/CJWMain');
var TabBarIOSDemo = React.createClass({
//UI的布局函數
    render(){
        return(
            <Main/>
        );
    }
});
const styles = StyleSheet.create({});
AppRegistry.registerComponent('lianxi', () => TabBarIOSDemo);

CJWMain.js:頁面切換模塊

import React, { Component } from 'react';
import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS,    NavigatorIOS} from 'react-native';
var Home = require('../Component/CJWHome');
var Find = require('../Component/CJWFind');
var Message = require('../Component/CJWMassege');
var Mine = require('../Component/CJWMine');
var mainModel = React.createClass({
    //初始化函數
    getInitialState(){
        return {
            selectedTabItem:'home'
        }
    },
    //UI的布局函數
    render(){
        return( 
           <View style={styles.containerStyle}>
            <TabBarIOS>

                {/*首頁*/} 
               <TabBarIOS.Item
                    icon={require('image!tabbar_home')}
                    title="首頁"
                    selected={this.state.selectedTabItem == 'home'}
                    onPress={()=> {this.setState({ selectedTabItem:'home'})}}
                >
                    <NavigatorIOS
                        tintColor='orange' 
                       style={{flex:1}}
                        initialRoute={
                        {
                            component:Home,
                            title:'首頁',
                            leftButtonIcon:require('image!navigationbar_friendattention_highlighted'),
                            rightButtonIcon:require('image!navigationbar_pop_highlighted')

                        }
                        }
                    />
                </TabBarIOS.Item>

                {/*發現*/}
                <TabBarIOS.Item
                    icon={require('image!tabbar_discover')} 
                   title="發現"
                    selected={this.state.selectedTabItem == 'find'}
                    onPress={()=> {this.setState({ selectedTabItem:'find'})}}
                >
                    <NavigatorIOS
                        tintColor='orange'
                        style={{flex:1}}
                        initialRoute={
                        {
                            component:Find,
                            title:'發現',
                            leftButtonIcon:require('image!navigationbar_friendattention_highlighted'),
                            rightButtonIcon:require('image!navigationbar_pop_highlighted')
                        } 
                       } 
                   />
                </TabBarIOS.Item>

                {/*消息*/}
                <TabBarIOS.Item
                    icon={require('image!tabbar_message_center')}
                    title="消息"
                    selected={this.state.selectedTabItem == 'message'}
                    onPress={()=> {this.setState({ selectedTabItem:'message'})}}
                >
                    <NavigatorIOS
                        tintColor='orange'
                        style={{flex:1}}
                        initialRoute={
                        {
                            component:Message,
                            title:'消息',
                            leftButtonIcon:require('image!navigationbar_friendattention_highlighted'),
                            rightButtonIcon:require('image!navigationbar_pop_highlighted')
                        }
                        }
                    />
                </TabBarIOS.Item>

                {/*我的*/}
                <TabBarIOS.Item
                    icon={require('image!tabbar_profile')}
                    title="我的"
                    selected={this.state.selectedTabItem == 'mine'}
                    onPress={()=> {this.setState({ selectedTabItem:'mine'})}}
                >
                    <NavigatorIOS
                        tintColor='orange'
                        style={{flex:1}}
                       initialRoute={
                        { 
                           component:Mine,
                            title:'我的',
                            leftButtonIcon:require('image!navigationbar_friendattention_highlighted'),
                            rightButtonIcon:require('image!navigationbar_pop_highlighted') 
                       }
                        }
                    />
                </TabBarIOS.Item>
            </TabBarIOS>
        </View>
    ) 
   }
});
const styles = StyleSheet.create({
    containerStyle:{
        flex:1,
    }
});
//輸出獨立的類
module.exports = mainModel;

CJWHome.js:網絡請求模塊

import React, { Component } from 'react';
import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS,    ListView,    TouchableOpacity,    Image} from 'react-native';
//引入外部的js文件,組件類
var ScrollImage = require('../Component/CJWScrollImage');
var NewsDetail = require('../Component/CJWNewsDetail');
var homeModel = React.createClass({
    //初始化函數,不可以改變的值
    getDefaultProps(){
        return{
            url:'http://c.3g.163.com/nc/article/list/T1467284926140/0-20.html',
            param:'T1467284926140' 
       } 
   },
    //初始化函數,可以改變默認值
    getInitialState(){
        return{
            //listview的頭部數據---輪播圖
                headerDataArr:[],
            //cell的數據源
                dataSource:new ListView.DataSource({
                rowHasChanged:(r1,r2) => r1 !== r2
            })
        }
    },
    //UI的布局函數
    render(){
        return(
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                renderHeader={this.renderHeader}
            />
        );
    },

    //cell的數據處理
    renderRow(rowData){
        return(
            <TouchableOpacity 
                    activeOpacity={0.5}
                    onPress={()=>this.onPressCell(rowData)}>
                <View style={styles.cellStyle}>
                    {/*左邊的視圖*/}
                    <Image source={{uri:rowData.imgsrc}} style={styles.imageStyle}/>
                    {/*右邊的文字*/}
                    <View style={styles.rightViewStyle}>
                        <Text style={styles.rightTextStyle}>{rowData.title}</Text>
                        <Text style={styles.bottomTextStyle}>{rowData.replyCount + '跟帖'}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    },

    //頭部視圖
    renderHeader(){
        if(this.state.headerDataArr.length == 0)return;
        return(
            <View style={styles.headerViewStyle}>
                {/*<Text>頭部視圖</Text>*/} 
               <ScrollImage
                    //頁面之間傳值方式一:開始傳值的源頭
                    imageDataArr={this.state.headerDataArr} 
               />
            </View>
        )
    },

    //cell的點擊事件
    onPressCell(data){
        this.props.navigator.push({
            component:NewsDetail,
            // title:data.title,
            title:'新聞詳情',
           //頁面之間傳值方式二,??將數據傳遞到詳情頁面
            passProps:{data}
        })
    },

    //網絡請求處理
    componentDidMount(){
        this.loadDataNet();
    },

     //網絡請求處理
    loadDataNet(){
    fetch(this.props.url)
        .then((response) =>response.json())
        .then((responseData) => {
            // console.log(responseData);
            var headArr = [],listArr = [];
            // console.log(responseData[this.props.param]);
            var jsonData = responseData[this.props.param];
            for (var i = 0; i < jsonData.length;i ++){
                if(jsonData[i].hasAD == 1){
                    headArr = jsonData[i].imgextra;
                    // console.log(jsonData[i].imgextra); 
               }else{
                    listArr.push(jsonData[i]);
                    // console.log(jsonData[i].imgsrc);
                }
            }
            //更新狀態機
            this.setState({
                //頭部數據源
                headerDataArr:headArr,
                //cell的數據源
                dataSource:this.state.dataSource.cloneWithRows(listArr)
            });
        })
        //異常處理:網絡異常,請求異常
        .catch((error) => {
            console.error(error);
        }
)}

const styles = StyleSheet.create({
    headerViewStyle:{
        // height:80,
        // backgroundColor:'red'
    },
    cellStyle:{
        flexDirection:'row',
        borderBottomColor:'gray',
        borderBottomWidth:0.5,
        padding:10
    },
    rightViewStyle:{
        marginLeft:20
    }, 
   imageStyle:{
        width:90,
        height:90
    }, 
   rightTextStyle:{
        width:250,
        fontSize:16,
        paddingTop:10
    },
    bottomTextStyle:{
        color:'gray',
        bottom:-30,
        // marginRight:40
        left:170
    }
});
//輸出獨立的類
module.exports = homeModel;

CJWNewsDetail.js:新聞詳情頁面

var newDetail = React.createClass({
        //UI的布局函數
    render(){
        return( 
             <WebView
                automaticallyAdjustContentInsets={false}
                style={styles.webView}

                //??????從上一頁面傳遞的data模型參數
                source={{uri: this.props.data.url_3w}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                onNavigationStateChange={this.onNavigationStateChange}
                onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
                startInLoadingState={true}
                scalesPageToFit={this.state.scalesPageToFit}
            />
        );
    },
});

三、項目實戰開始：

問題1:

圖1

遇到的問題：：Unable to find this module in its module map or any of the node_modules directories under /Users/chengjinwei/Desktop/RN實戰項目/RNProject/Component/Mine/RNMain and its parent directories
問題的分析：導入的文件模塊路徑出錯（在模塊映射或任何node_modules目錄下都無法找到該模塊’）
解決問題：var RNMain = require('./Component/Mine/RNMain');改為var RNMain = require('./Component/Main/RNMain')即可;

問題2:

屏幕快照 2016-10-12 下午6.59.12.png

2-1webstorm里面編寫好程序之后，使用xcode跑起來之后，圖標沒有顯示出來，在xcode里面的圖片的存在有問題。
2-2處理：新建一個image.xcassets(在iOS－>Resource->Asset Catalog->更改文件的名字－將圖片資源放到這個文件里面).??AppIcon 和LaunchImage不能少

導入TabNavigator ：??是從外部導入的組件

1.找到工程路徑：cd+項目路徑
2.命令行導入navigator組件：npm install react-native-tab-navigator  --save

屏幕快照 2016-10-11 下午7.03.02.png

項目框架搭建：
效果圖：

rn.gif

index.ios.js代碼：

import React, { Component } from 'react';
import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';
var RNMain = require('./Component/Main/RNMain');
var RNProject = React.createClass({
  render() {
    return (
        <RNMain/>
    );
  }
})
AppRegistry.registerComponent('RNProject', () => RNProject);

RNMain.js代碼：

import React, { Component } from 'react';
import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    Navigator} from 'react-native';
//??是從外部導入的組件
import TabNavigator from 'react-native-tab-navigator';
// 導入文件的路徑
var Home = require('../Home/RNHome');
var Shop = require('../Shop/RNShop');
var Mine = require('../Mine/RNMine');
var More = require('../More/RNMore');
var Main = React.createClass({
    getInitialState(){
        return{
        selectedTab:'home' 
       } 
   },
    //UI的布局函數
    render(){
        return(
            <TabNavigator>
                {/*首頁*/}
                {this.renderNavigatorFunction('首頁','icon_tabbar_homepage','icon_tabbar_homepage_selected','home','首頁',Home)}
                {/*購物*/}
                {this.renderNavigatorFunction('商家','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','shop','商家',Shop)}
                {/*我的*/}
                {this.renderNavigatorFunction('我的','icon_tabbar_mine','icon_tabbar_mine_selected','mine','我的',Mine)}
                {/*更多*/}
                {this.renderNavigatorFunction('更多','icon_tabbar_misc','icon_tabbar_misc_selected','more','更多',More)}
            </TabNavigator>
        );
    },

    // 對navigator封裝
    renderNavigatorFunction(title,defaultImage,selectedImage,selectedItem,routeTitle,component){
        return(
            <TabNavigator.Item
                title={title}
                renderIcon={() => <Image source={{uri:defaultImage}} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.iconStyle}/>}
                onPress={()=>this.setState({selectedTab:selectedItem})}
                selected={this.state.selectedTab === selectedItem}
            >
                 //導航組件
                {/*<Home/>*/}
                <Navigator
                    initialRoute={{name:routeTitle,component:component}} 
                   configureScene={()=>{
                        return Navigator.SceneConfigs.PushFromRight;
                    }}
                    renderScene={(route,navigator)=>{
                        let Component = route.component;
                        return <Component {...route.passProps} navigator={navigator} />
                    }}
                />
            </TabNavigator.Item>
          ) 
     }
});

const styles = StyleSheet.create({
    containerStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    }, 
   iconStyle:{
        width:30,
        height:30, 
       // backgroundColor:'red'
    }
});
//輸出獨立的類
module.exports = Main;

RNHome.js代碼：

var HomeDetail = require('./RNHomeDetail');
var Home = React.createClass({
    //UI的布局函數
    render(){
        return( 
           <View style={styles.containerStyle}>
                {/*導航的點擊進入下一頁面*/}
                <TouchableOpacity onPress={()=>{this.pushToDetail()}}>
                    <Text>
                        首頁
                    </Text>
                </TouchableOpacity>
          </View>
        );
    },
    //導航的點擊進入下一頁面
    pushToDetail(){
        this.props.navigator.push(
            { 
              //跳轉到指定的頁面
               component:HomeDetail,
             // 指定頁面的標題
               title:'詳情頁' 
           }
        )
      }
});
const styles = StyleSheet.create({
    containerStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
   }
});
//輸出獨立的類
module.exports = Home;

RNHomeDetail.js代碼：

var HomeDetail = React.createClass({
    //UI的布局函數
    render(){
        return(
            <View style={styles.containerStyle}>
                <TouchableOpacity onPress={()=>{this.popToBack()}}>
                    <Text>
                        詳情頁面
                    </Text>
            </TouchableOpacity>
            </View>
        );   
   }, 
   // 返回到上一頁面
    popToBack(){
        this.props.navigator.pop();
    }
});
const styles = StyleSheet.create({ 
   containerStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center', 
       backgroundColor:'red'
    }
});
//輸出獨立的類
module.exports = HomeDetail;

最后編輯于：2017.12.04 04:33:17

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,488評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,034評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,327評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,554評論 1贊 307
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,337評論 6贊 404
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,883評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 42,975評論 3贊 439
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,114評論 0贊 286
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,625評論 1贊 332
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,555評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,737評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,244評論 5贊 355
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 43,973評論 3贊 345
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,362評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,615評論 1贊 280
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,343評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,699評論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

React-native框架（二）

React-native框架（二）

一、TabBarIOS和TabBarIOS.Item組件學習

二、網絡請求

三、項目實戰開始：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

React-native框架（二）

一、TabBarIOS和TabBarIOS.Item組件學習

二、網絡請求

三、項目實戰開始：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频