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;