通过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写的页面嵌入到现有项目中，肯定会有很多坑，目前还没开始，等完成后来更新博客