最近公司要使用RN開發APP專案，我從一個後端人員變成了一個前端踩雷的。這兩天看了很多的網上介紹，發現FB新出的CRNA感覺很牛逼，是一個新的沙盒系統，能夠將專案自動編譯成IOS或者Android的包，並且編譯工具EXPO用起來感覺還是很爽的，主要是可以看到其他開源專案的demo，很方便，不用自己下載安裝了。下面記錄一下最近踩的坑，防止以後再次遇到

       1.整合native-base，native-base是一個RN的基礎元件集合，裡面對元件進行了一些封裝，官網地址：https://www.nativebase.io/。整合過程中遇到了許多坑，這裡就不列舉了，只把最後完整的整合過程說一下。

a)環境要求：node 版本大於等於6.0，npm大於等於4.0，react-native-cli，git(我用的2.10.1),

b)安裝過程：

i) 進入CRNA建立的專案檔案，執行命令，安裝NativeBase和@expo/vector-icons

npm install native-base --save
npm install @expo/vector-icons --save

ii) NativeBase使用了一些可以使用loadAsync函式載入的自定義字型，可以檢視EXPO的link檔案（這段是官網說明的,其實是一個大坑啊，我用官網的程式碼，根本就沒法執行，因為要報錯，載入的時候需要有一個判斷機制，後來無意找到一個重複載入的例項才解決，直接上程式碼）

import React from 'react';
import Expo from 'expo';
import {
    Container,
    Header,
    Title,
    Content,
    Text,
    H3,
    Button,
    Icon,
    Footer,
    FooterTab,
    Left,
    Right,
    Body,
    Segment
} from "native-base";

export default class NativeBaseList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            seg: 2,
            isReady: false
        };
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            'Roboto': require('native-base/Fonts/Roboto.ttf'),
            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
        });
        this.setState({ isReady: true });
    }

    render() {
        if (!this.state.isReady) {
            return <Expo.AppLoading />;
        }
        return (
            <Container>
                <Header />
                <Segment>
                    <Button
                        first
                        active={this.state.seg === 1 ? true : false}
                        onPress={() => this.setState({ seg: 1 })}
                    >
                        <Text>Puppies</Text>
                    </Button>
                    <Button
                        active={this.state.seg === 2 ? true : false}
                        onPress={() => this.setState({ seg: 2 })}
                    >
                        <Text>Kittens</Text>
                    </Button>
                    <Button
                        last
                        active={this.state.seg === 3 ? true : false}
                        onPress={() => this.setState({ seg: 3 })}
                    >
                        <Text>Cubs</Text>
                    </Button>
                </Segment>
                <Content padder>
                    {this.state.seg === 1 &&
                        <Text>
                            Puppies Selected
            </Text>}
                    {this.state.seg === 2 &&
                        <Text>
                            Kittens Selected
            </Text>}
                    {this.state.seg === 3 &&
                        <Text>
                            Cubs Selected
            </Text>}
                </Content>
            </Container>
        );
    }
}
 

iii) git說明：git是一個坑，安裝的過程中會使用git命令，因此git在安裝的時候要選擇可以在windows下的cmd視窗執行的雙相容模式，但是在使用的過程中還是會報如下錯誤：

網上搜索了一下，原因是因為git在執行的時候預設是使用[email protected]://這種模式，但是native-base下載是使用[email protected]://這種模式，因此要修改git的配置：

git config --global url."https://".insteadOf git://

修改配置以後，下載會有報警問題不大，在專案中引用能夠正常使用和顯示了。

        2..jsx檔案問題，因為是初學者，所以很多地方不懂，開始建立檔案的時候寫成了.jsx檔案，結果發現RN無法編譯執行，開始一直不懂，網上找了很多地方也沒有答案，後來在自己無意間測試出來的，無知者太老火了，後來百度了一下發現RN可以打包執行.jsx檔案，需要修改原始碼，我自己也寫了一篇部落格記錄，連結如下：http://blog.csdn.net/cy22201222/article/details/77877244

TODO 嵌入到現有專案，目前準備要把RN寫的頁面嵌入到現有專案中，肯定會有很多坑，目前還沒開始，等完成後來更新部落格