圖片來自網(wǎng)絡(luò)

吐槽一下：千言萬語匯成一句MMP袄琳，第一個(gè)ReactNative程序終于跑起來了~~~

在淘寶上買了一套R(shí)N的教學(xué)視頻，業(yè)余時(shí)間花了兩周千贯，跟著視頻髓堪，仿寫了大眾點(diǎn)評(píng)項(xiàng)目送朱，以下是心路歷程

雖然是跟著視頻學(xué)習(xí)娘荡，仿寫干旁，但是還是存在一些”意外驚喜“的，明明代碼寫的一樣炮沐，視頻教程不報(bào)錯(cuò)争群，而我的工程卻報(bào)錯(cuò)，感覺很酸爽大年。

先亮一亮成果吧

首頁

商家

我的

更多

一.遇到的問題

1.RN版本升級(jí)到0.43以上换薄，Navigator不能直接從react-native里面獲取

導(dǎo)航欄錯(cuò)誤

這是因?yàn)榘姹旧?jí)到0.43以上的話，Navigator不能直接從react-native里面獲取了
解決方案：

打開終端cd到項(xiàng)目所在目錄翔试，輸入命令：npm install react-native-deprecated-custom-components --save
然后引用

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,   // 判斷當(dāng)前運(yùn)行的系統(tǒng)
} from 'react-native';


/**-----導(dǎo)入外部的組件類------**/
import TabNavigator from 'react-native-tab-navigator';
import Navigator from 'react-native-deprecated-custom-components'

import {Navigator}
 from react-native-deprecated-custom-components
 <Navigator.Navigator
              initialRoute={{ name: defaultName, component: defaultComponent }}
              configureScene={(route) => {
                return Navigator.Navigator.SceneConfigs.VerticalDownSwipeJump;
              }}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
 }}
 />

2.錯(cuò)誤注釋導(dǎo)致報(bào)錯(cuò)

語法錯(cuò)誤

錯(cuò)誤注釋

用快捷鍵 command+/ 造成的語法錯(cuò)誤轻要， 手動(dòng)// 就好了

3.狀態(tài)欄是黑色

狀態(tài)欄顏色不對(duì)

到Xcode中打開項(xiàng)目，添加以下代碼

修改狀態(tài)欄顏色為白色

二.部分筆記

1.Tabbar的封裝垦缅，以及Navigator的導(dǎo)入

render() {
        return (
            <TabNavigator>
                {/*--首頁--*/}
                {this.renderTabBarItem('首頁', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected','home', '首頁', Home)}
                {/*--商家--*/}
                {this.renderTabBarItem('商家', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected','shop', '商家', Shop)}
                {/*--我的--*/}
                {this.renderTabBarItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected','mine', '我的', Mine)}
                {/*--更多--*/}
                {this.renderTabBarItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected','more', '更多', More, 10)}
            </TabNavigator>
        );
    },

    // 每一個(gè)TabBarItem
    renderTabBarItem(title, iconName, selectedIconName, selectedTab, componentName, component, badgeText){
        return(
            <TabNavigator.Item
                title={title}
                renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle}/>} // 圖標(biāo)
                renderSelectedIcon={() =><Image source={{uri: selectedIconName}} style={styles.iconStyle}/>}   // 選中的圖標(biāo)
                onPress={()=>{this.setState({selectedTab:selectedTab})}}
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={styles.selectedTitleStyle}
                badgeText = {badgeText}
            >
                <Navigator.Navigator
                    initialRoute={{ name: componentName, component: component }}
                    configureScene={(route) => {
                        return Navigator.Navigator.SceneConfigs.PushFromRight;
                    }}
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator} />

                    }} />

            </TabNavigator.Item>
        );
    }

2.適配安卓

iconStyle:{
        width: Platform.OS === 'ios' ? 30 : 25,
        height:Platform.OS === 'ios' ? 30 : 25
    },

三.要點(diǎn)總結(jié)

其實(shí)跟著寫下來冲泥，發(fā)現(xiàn)RN其實(shí)挺簡單的，作為一個(gè)iOS開發(fā)者壁涎，學(xué)起來算是得心應(yīng)手

要點(diǎn)一：項(xiàng)目結(jié)構(gòu)要清晰凡恍，開始動(dòng)手寫代碼之前要理清楚整個(gè)項(xiàng)目的組織結(jié)構(gòu)與目錄層級(jí)，為后面的編寫打好基礎(chǔ)

圖片.png

要點(diǎn)二：對(duì)組件進(jìn)行合理封裝怔球，抽取嚼酝，使代碼便于閱讀，便于修改
要點(diǎn)三：寫代碼一定要細(xì)心竟坛，越簡單的錯(cuò)誤越難發(fā)現(xiàn)
要點(diǎn)四：遇到困難不要放棄闽巩，一定能找到解決方法的

ReactNative的學(xué)習(xí)就告一段落了，還是學(xué)到不少東西担汤。
文字記錄成長涎跨，歡迎大家指點(diǎn)！