通過creact-react-native-app構建項目遇到的坑

       最近公司要使用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在運行的時候默認是使用git@git://這種模式，但是native-base下載是使用git@https://這種模式，因此要修改git的配置：

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

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

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

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