React Native (一) 入门实践

上周末开始接触react native，版本为0.37，边学边看写了个demo，语法使用es6/7和jsx。准备分享一下这个过程。之前没有native开发和react的使用经验，不对之处烦请指出。笔者认为从Vue过度到React应该是非常容易的，毕竟都是面向组件的，一通百通，只是每个框架的特性可能有所不同。本文的目的在于希望对在web开发有一定基础，又想涉及app开发的同学有帮助，共同进步。

一、环境安装

首先是开发环境安装，我是在win7/8 64位环境下安装的安卓环境。模拟器用的是android studio自带模拟器(android emulator)，安卓API 24(7.0)，因为我没有mac -.-。文中组件的使用也会以安卓的为主。具体的安装流程官网或中文网都有讲解，我也是按照那个流程走的。

这里说下安装和运行过程中经常出现但教程又没有提到的问题：

1.gradle-2.4-all.zip无法安装引发的错误，可以参考这里。

2.环境安装完成，app成功构建，但是更改代码react packager没有监听到文件变动并重新打包bundle，导致reload后无法更新app的问题。只有重新构建app并重启react packager才能解决。但这样太麻烦了，解决办法可以参考这里。我按照这个方式修改以后，环境表现就正常了。

3.安卓模拟器经常崩溃。

第一个问题与是否使用科学上网工具以及安卓环境配置和SDK有关系。第二个问题在win7环境下遇到过，修改数值后正常了，win8正常。第三个问题无解。

rn在windows下的安卓开发环境的坑还是比较多的。

4.这是一个比较完整的参考

二、demo app的功能和项目结构

首先看看这个demo的流程：

流程描述：

第一个场景是登录界面，输入账号和密码以后登录。登录后进入第二个场景，这是一个tabview容器，包含了三个tab：搜图书列表、电影排行列表和一个关于界面。列表视图支持上啦加载更多和下拉刷新，返回顶部以及跳转列表项的详情。关于界面里放了个静态的 swiper、说明以及一个登出的按钮，会返回到登录页。

说明：1.登录页做的是假的，后期可以加上session验证。2.搜图书和电影Top250排行都直接调用的豆瓣开放接口。

项目结构如下：

目录描述：

common -  公用工具(公用方法以及豆瓣接口Model的封装)

components - 全局公用组件(和业务无关)

images - 公用组件和业务视图组件的图片

views - 业务视图组件和业务公用组件(按照场景分文件夹)

views/MainView - 根组件(渲染了一个Navigator来控制整个App的场景跳转)

index.android.js - 入口文件(注册根组件，runApplication的前奏)

package.json - rn和第三方相关依赖

下面开始对每个场景进行拆分介绍。

三、入口文件和根组件

index.android.js这个文件按照官方文档的写法就可以，需要注意的是registerComponent方法传入的项目名一定要和命令行工具中执行react-native init xxx初始化命令时候输入的项目名称保持一致。

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';

import MainView from './views/MainView';

AppRegistry.registerComponent('rndemo', () => MainView);

MainView.js作为根组件主要渲染了一个导航器来控制App场景跳转，所有业务视图组件都在它的控制下。

import React, {Component} from 'react';
import {View, Navigator} from 'react-native';

import LoginView from './login/LoginView';

export default class MainView extends Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: 'LoginView', component: LoginView}}
                configureScene={(route) => Navigator.SceneConfigs.PushFromRight}
                renderScene={(route, navigator) => <route.component {...route.params} navigator={navigator} />}
            />
        );
    }
}

这个导航器类似于路由栈，是一种栈式结构，出栈和入栈的配合就能实现最基本的界面跳转，也提供有更高级的方法。

initialRoute要求指定默认显示的组件，这里import了登录视图组件，并指定为导航器的默认组件。confgureScene是导航器手势控制和动画配置，renderScene会渲染当前导航栈中被压入或者指定跳转的组件。

需要注意的是 <route.component {...route.params} navigator={navigator} /> 这里， {...route.params} 这是一个es6延展操作语法，能够进行不定参数接收、数组和对象的拆分等。能够进行批量赋值，可以将params对象的所有key->value结构转换成不同的prop。

比如：route.params值为 {a: 123,b: (a) => a + 1,c: true} ，最后的结果相当于 <route.component a={123} b={(a) => a + 1} c={true} navigator={navigator} />

虽然是语法范畴，但经常会用到，还是介绍一下。route.params可以用来给要跳转到的视图组件传递参数。如果数据过为复杂还是需要专门的数据流(状态)管理工具。这个demo因为数据简单，props传参已足够使用，也就没有用上redux，后面的各类组件也不会用到。有兴趣的话可以到别处了解一下redux。我在前段时间的vue.js组件化开发实践中对flux思路下的vuex和redux有一定介绍。vuex是专门针对vue的一个定制版，泛用性没有redux高，但和vue组件契合度高。redux这方面正好相反，但思想基本相同。

四、登录

登陆页面很简单，主要是一些布局：

jsx结构：

<ScrollView>
    <Image style={sty.back} source={require('../../images/login/banner_2.png')}/>
    <View style={[sty.back, sty.mask]}></View>
    <View style={sty.loginView}>
        <View style={sty.bannerWrap}>
            <Image style={sty.bg} source={require('../../images/login/banner_1.png')}/>
            <View style={sty.logoTextWrap}>
                <Animated.Text style={[sty.logoText, {opacity: this.state.fadeAnim}]}>Demo</Animated.Text>
            </View>
            <View style={sty.copyRightWrap}>
                <Text style={sty.copyRightText}>©2016</Text>
            </View>
        </View>
        <View style={sty.inputWrap}>
            <Text style={sty.inputTitle}>SIGN IN</Text>
            <TextInput
                {/* ... 账号 */}/>
            <TextInput
                {/* ... 密码 */}/>
            <Animated.View style={{opacity: this.state.fadeAnim}}>
                <TouchableOpacity
                    style={sty.loginBtn}
                    onPress={this.login.bind(this)}
                >
                    <Text style={sty.loginBtnText}>登录</Text>
                </TouchableOpacity>
            </Animated.View>
        </View>
        <View style={sty.footer}>
            <Image style={sty.footerLogo} source={require('../../images/login/react_native_logo.png')} />
            <Text style={sty.footerText}>Powered by React-Native</Text>
        </View>
    </View>
</ScrollView>

const sty = StyleSheet.create({
    back: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        height: height - 24
    },
    mask: {
        backgroundColor: '#2B75DE',
        opacity: 0.2
    },
    loginView: {
        height: height - 24
    },
    bannerWrap: {

    },
    bg: {
        width: 375 * refRat,
        height: 235 * refRat
    },
    logoTextWrap: {
        position: 'absolute',
        bottom: 90
    },
    logoText: {
        width: 375 * refRat,
        textAlign: 'center',
        fontSize: 40,
        color: '#fff'
    },
    copyRightWrap: {
        position: 'absolute',
        bottom: 0,
        paddingTop: 6,
        paddingBottom: 6,
        width: 375 * refRat,
        borderTopWidth: onePx,
        borderTopColor: '#fff',
        opacity: 0.5
    },
    copyRightText: {
        textAlign: 'center',
        fontSize: 12,
        color: '#fff'
    },
    inputWrap: {
        alignItems: 'center'
    },
    inputTitle: {
        paddingTop: 5,
        paddingBottom: 20,
        textAlign: 'center',
        fontSize: 12,
        color: '#fff',
        opacity: 0.5
    },
    input: {
        width: 230 * refRat,
        textAlign: 'center',
        color: '#fff',
        borderBottomWidth: onePx,
        borderBottomColor: '#fff',
    },
    loginBtn: {
        marginTop: 30,
        padding: 10,
        width: 90 * refRat,
        alignItems: 'center',
        borderRadius: 20,
        backgroundColor: '#FF8161'
    },
    loginBtnText: {
        color: '#fff'
    },
    footer: {
        position: 'absolute',
        bottom: 0,
        width: 375 * refRat,
        alignItems: 'center'
    },
    footerLogo: {
        width: 20 * refRat,
        height: 20 * refRat
    },
    footerText: {
        marginTop: 5,
        textAlign: 'center',
        fontSize: 12,
        color: '#fff'
    }
});

banner的文字和登录按钮有一个简单的淡入效果，这是通过Animated实现的，官方文档有更多的介绍。

登录以后跳转到TabView，使用的事导航器的restTo方法：

navigator.resetTo({
       name: 'TabView',
       component: TabView
});

它会跳转到新的场景，并重置整个路由栈。也就是说不能再直接通过pop出栈返回到登录页，必须指定跳转才行。这样可以避免在TabView进行了右滑等手势操作，无意间又回到了登录界面。

五、TabView

这是在github上找的一个第三方组件：react-native-tab-view，需要0.36以上版本支持。提供了顶部和底部tabbar，以及左右滑动来切换tab的容器，也支持点击tabbar按钮切换tab。tabbar点击自带有水波扩散你动画，类似于css3 scale实现的那种水波效果。

// 导入rn相关
// ...
// 导入需要的组件
// ...
export default class TabView extends Component {
    constructor (props){
        super(props);

        const {navigator} = props;

        this.state = {
            index: 0,
            routes: [
                {key: '1',title: '搜图书'},
                {key: '2',title: '电影排行'},
                {key: '3',title: '关于'}
            ],
            routeMap: {
                1: <BookListView navigator={navigator} />,
                2: <MovieListView navigator={navigator} />,
                3: <AboutView navigator={navigator} />
            }
        };
    }

    handleChangeTab (index){
        this.setState({index});
    }

    renderFooter (props){
        return <TabBar tabStyle={{backgroundColor: '#6C6A6A'}} {...props} />;
    }

    renderScene ({route, navigator}){
        return this.state.routeMap[route.key] || null;
    }

    render (){
        return (
            <TabViewAnimated
                style={sty.container}
                navigationState={this.state}
                renderScene={this.renderScene.bind(this)}
                renderFooter={this.renderFooter}
                onRequestChangeTab={this.handleChangeTab.bind(this)}
            />
        );
    }
}

const sty = StyleSheet.create({
    // 样式
    // ...
});

导入搜图书、电影排行和关于这三个视图组件，简单配置便可运行。具体可查看github上的介绍和示例代码。

六、搜图书

从最直观的列表开始介绍。列表采用ListView实现，ListView继承自ScrollView，扩展了一些功能，列表需要一个DataSource管理数据，我们取回的数据都必须用它改造一遍：

// 各种导入
// ...

const ds = new ListView.DataSource({
    // 更新策略(列表某项是否需要重新渲染)：新旧值不相等
    rowHasChanged: (v1, v2) => v1 !== v2
});

rowsHadChanged定义了怎么判断列表项是否有改变。虚拟DOM和diff算法是react的很巧妙的地方。新render出的虚拟DOM视图树会和当前的树进行比较，和得到不同地方，以类似于打补丁的方式打到当前的树上，也称之为'和解'过程。这就意味着只有真正改变了的地方才需要重新绘制，在有很多元素的时候能大幅提升渲染性能。

下面是BookListView类的结构：

// ...

export default class BookListView extends Component {
    constructor (props){
        super(props);
        this.state = {
            showLoading: true,
            scrollY: 0,
            q: '红楼梦',
            start: 0,
            noMore : false,
            isLoading: false,
            data: [],
            dataSource: ds.cloneWithRows([])
        };
    }

    async setListData (data){
        await this.setState({
            data: data,
            dataSource: ds.cloneWithRows(data)
        });
    }

    async componentWillMount (){
        let data = await this.getListData();
        await this.setListData(data);
        this.setState({showLoading: false});
    }

    async getListData (){
        this.setState({isLoading: true});
        let {q, start} = this.state;
        let data = await searchBook({q, start, count});
        await this.setState({
            start: start + count,
            isLoading: false
        });
        return data.books;
    }

    async listRefresh (){
        await this.setState({start: 0,noMore : false});
        let data = await this.getListData();
        this.setListData(data);
        if (!data.length) ToastAndroid.show("没有数据", ToastAndroid.SHORT);
    }

    renderFooter (){
        if (this.state.isLoading || this.state.data.length < 1) return null;
        if (this.state.data.length < count) return <ListGetMore />;
        return <ListGetMore isLoadAll={true}/>;
    }

    async onEnd (){
        if (this.state.isLoading || this.state.noMore) return;

        let data = await this.getListData();
        if (data.length < count) this.setState({noMore: true});
        let newList = this.state.data.concat(data);
        this.setListData(newList);
    }

    search (){
        let {q} = this.state;
        if (!q) return ToastAndroid.show("请输入书名", ToastAndroid.SHORT);
        this.listRefresh();
    }

    toDetail (data){
        const {navigator} = this.props;
        navigator.push({
            name: 'BookDetailView',
            component: BookDetailView,
            params: {data}
        });
    }

    onScroll (e){
        let scrollY = e.nativeEvent.contentOffset.y;
        this.setState({scrollY});
    }

    render (){
        return (
            <View>
                <View
                    style={sty.searchWrap}>
                    <TextInput
                        style={sty.searchInput}
                        ref={(SearchInput) => {_SearchInput = SearchInput;}}
                        value={'' + this.state.q}
                        placeholder={'输入书名'}
                        autoCorrect={false}
                        clearButtonMode={'while-editing'}
                        underlineColorAndroid={'transparent'}
                        autoCapitalize={'none'}
                        onChangeText={(q) => this.setState({q})}
                    />
                    <TouchableOpacity
                        style={sty.searchBtn}
                        onPress={() => {
                            _SearchInput.blur();
                            _ListView.scrollTo({y: 0, animated: false});
                            this.search();
                        }}
                    >
                        <Text style={sty.searchBtnText}>搜索</Text>
                    </TouchableOpacity>
                </View>
                <ListView
                    style={sty.listWrap}
                    ref={(ListView) => {_ListView = ListView;}}
                    enableEmptySections={true}
                    automaticallyAdjustContentInsets={false}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <BookListItem {...rowData} toDetail={this.toDetail.bind(this)}></BookListItem>}
                    renderFooter={this.renderFooter.bind(this)}
                    onEndReached={this.onEnd.bind(this)}
                    onEndReachedThreshold={50}
                    onScroll={this.onScroll.bind(this)}
                    scrollEventThrottle={5}
                    refreshControl={
                        <RefreshControl
                            onRefresh={this.listRefresh.bind(this)}
                            refreshing={this.state.isLoading}
                            colors={['#ff0000', '#00ff00', '#0000ff']}
                            enabled={true}
                        />
                    }
                />
                {this.state.scrollY > (height - 30 - 40 * refRat) ?
                    <ListToTop listView={_ListView}/> :
                    null}
                {this.state.showLoading ?
                    <ActivityIndicator style={sty.loading} size={"large"} /> :
                    null}
            </View>
        );
    }
}

在布局上ListView位于整个顶部搜索栏的下方，样式为flex布局，其内部子组件将按列排布。具体的属性和配置，以及dataSource数据集等在文档均有说明。

这里需要介绍下组件调用别的组件的方法：

BookListView作为导出的组件，它是由类中的state和方法，以及render方法返回的一个各种组件组成的复合组件，在实例中，我们点击了搜索按钮，输入框失去了焦点，让列表返回顶部，并触发了列表的搜索更新。都是通过refs这个属性来实现的。

 <TextInput
    // ...
    ref={(SearchInput) => {_SearchInput = SearchInput;}}

 <TouchableOpacity
    // ...
    style={sty.searchBtn}
    onPress={() => {
        _SearchInput.blur();
        _ListView.scrollTo({y: 0, animated: false});
        this.search();
    }}
 >

// ...

<ListView
   style={sty.listWrap}
   ref={(ListView) => {_ListView = ListView;}}

// ...

可以看到ListView这个组件类配置了一个ref属性，值为一个函数，入参即为这个ListView类在运行的时候实例化出的ListView对象，然后赋值给了_ListView这个变量，在点击搜索按钮的时候我们调用了_ListView的scrollTo方法来返回顶部，然后调用了BookListView类最后实例出的对象的search方法，也就是 this.search(); 。基于箭头函数的特性，this是在写的时候决定，因此它一定是指向BookListView对象的。如果是这样调用：  <TouchableOpacity onPress={this.search.bind(this)} >  ，就需要这个this通过es5的bind方法传入进去，强制要求search方法被调用的时候其内部this一定指向BookListView实例化出来的那个对象，因为这个search方法内部可能需要用到这个对象的属性和方法。如果不用bind方法来强行指定上下文环境，this指向的会是TouchableOpacity类实例化出的那个对象。这也是属于语法范畴。

ref属性可以不一定赋予一个函数作为值，一个字符串也是可行的。比如： ref={'ListView'}  ，然后可以通过  this.refs['ListView']  取到ListView这个对象，即可调用它的方法。当然，在使用时this一定要保证是指向BookListView对象的。

this的指向如果弄错，如果遇到这类报错，可以从这点开始排查，会经常出现’undefined is not a function‘这类报错。

基于React流程的setState方法是异步的(不受React控制的流程除外)，这个一定要记住，如果在setState后直接获取state，值有可能还没有改变，要想保证改变，请使用es7的async/await特性，让异步操作用同步的方式来书写，其他异步方式也能解决。

列表的下拉刷新是通过配置refreshControl来实现的。

回到顶部按钮的显示与否是通过监听列表滚动的Y轴偏移来判断的，列表每次滚动会调用onScroll这个回调，从事件中获取到偏移，通过偏移量来决定按钮是否显示。由数据来驱动视图：

// ...
onScroll (e){
   let scrollY = e.nativeEvent.contentOffset.y;
   this.setState({scrollY});
}

// ...
<ListView
   // ...
   onScroll={this.onScroll.bind(this)}
   scrollEventThrottle={5}

// ...
{this.state.scrollY > (height - 30 - 40 * refRat) ?
    <ListToTop listView={_ListView}/> :
    null}

注意：

1.jsx里不能食用if else 等，只支持一个语句，所以有判断的地方必须使用三元表达式。

2.scrollEventThrottle是节流控制，类似于jquery的debounce-throttle插件，可以避免每一次的scroll都执行onScroll回调带来的性能问题，毕竟我们一秒钟的滚动时间会触发很多很多次onScroll事件。

上拉加载更多是通过滚动到底部的检测来触发事件。官方文档中都有配置介绍。

列表项BookListItem是封装的一个业务组件，通过传入props来提供渲染需要的数据。很简单布局的一个组件，这里不再详细说。

跳转图书详情视图BookDetailView是通过push压栈的方式进行的，之所以没有使用resetTo方法，是因为希望进入详情以后能通过pop出栈便能返回上一个视图：

// ...
toDetail (data){
     const {navigator} = this.props;
     navigator.push({
         name: 'BookDetailView',
         component: BookDetailView,
         params: {data}
 　　 });
} 
// ...

豆瓣开放接口的简单封装，很简单，就2个接口，哈哈。使用了rn环境自带的fetch：

// common/model.js

import {ToastAndroid} from 'react-native';

const _fetch = (url, param) => {
    let qstring = '';
    for (let key in param)
        qstring += key + '=' + param[key] + '&';
    url += '?' + qstring;
    return fetch(url);
}

const handle = async (url, param = {}) => {
    try {
        let response = await _fetch(url, param);
        let res = await response.json();
        return res;
    } catch (error){
        ToastAndroid.show('网络请求错误：' + error, ToastAndroid.LONG);
        return {books: [],subjects: []};
    }
}

// 豆瓣开放API url
const domain = 'https://api.douban.com';
const douban = {
     searchBook : domain + '/v2/book/search'
   , movieTop250 : domain + '/v2/movie/top250'
};

/**
 * 搜索图书
 * @param {q 查询关键字 tag 查询标签 start 本次偏移 count 本次条数}
 * @return {start 本次偏移 count 本次条数 total 总条数 books[] 图书集合}
 */
export const searchBook = param => handle(douban.searchBook, param);/**
 * 电影Top250排行
 * @param {start 本次偏移 count 本次条数}
 * @return {start 本次偏移 count 本次条数 total 总条数 total 总条数 subjects[] 电影集合}
 */
 export const movieTop250 = param => handle(douban.movieTop250, param);

七、电影排行

这个视图的列表相关组件以及详情组件与搜图书视图基本是一致的，只是少了搜索而已。

优化点：其实这两个视图的列表组件可以提取出公用的地方来抽象一次，封装为一个具有基本功能的公用List业务组件。搜图书列表和电影排行列表都可以继承自它，按需重写和扩展其他方法即可。

因为列表和详情基本与搜图书界面的功能基本一致，这里就只介绍一下webview内嵌豆瓣h5这里。从豆瓣取回的电影数据，有一个叫'alt'的字段存放了这个电影url，通过webview加载这个url，即可访问豆瓣的web页面：

<View>
    <View style={sty.header}>
        <TouchableOpacity
            style={sty.backBtn}
            onPress={this.back.bind(this)}
        >
            <Text style={sty.backBtnText}>{'<'}</Text>
        </TouchableOpacity>
        <Text numberOfLines={1} style={sty.headerText}>{this.props.title}</Text>
        {this.state.canGoBack  ?
            <TouchableOpacity
                style={sty.rightBtn}
                onPress={this.directBack.bind(this)}
            >
                <Text style={sty.rightBtnText}>{'关闭'}</Text>
            </TouchableOpacity> :
            <Text style={sty.rightBtn}></Text>}
    </View>
    <WebView
        style={sty.webView}
        ref={'webview'}
        automaticallyAdjustContentInsets={false}
        source={{uri: this.props.url}}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        decelerationRate="normal"
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator style={sty.loading} size={"large"} />}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
        onError={this.loadError.bind(this)}
    />
    <Dialog
        ref={'dialog'}
        content={'刷新吗？'}
        cancelAction={this.directBack.bind(this)}
        okAction={this.reloadWebView.bind(this)}
    />
</View>

头部有三个元素：左边的后退按钮，中间的标题，右边的直接关闭按钮。

后端按钮可以控制webview的后退，只要webview的history还没有back到底，否则将直接通过整个app的导航组件回到电影详情界面：

async back (){
    if (this.state.canGoBack){
        this.refs['webview'].goBack();
    } else {
        this.directBack();
    }
}

directBack (){
    const {navigator} = this.props;
    navigator.pop();
}

webview的每次history变化都会触发onNavigationStateChange事件，然后回调这个方法：

async onNavigationStateChange (navState){
    var {canGoBack, canGoForward, title, loading} = navState;
    await this.setState({
        canGoBack,
　　　　 title: loading ? '' : title
    });
}

传入navState状态对象，我们可以取到canGoBack和canGoForward这两个布尔值，它们表示了当前webview的history状况，能否前进和后退。如果canGoBack为true，我们通过调用webview的back方法，可以实现history.back的功能。navState.loading为false表示加载完成，这时我们可以取到web页面的title作为header的title。

并且我们在state里维护了canGoBack这个状态值，当他为true的时候，会显示右侧的关闭按钮，点击这个按钮，可以直接回退到电影详情界面。好处在于：当我们在webview中点击web页面的连接前进了很多次之后，不想再不停的点击后退按钮，不论history有多少层都可以直接退回到上个场景：

这个虚拟机里面请求外网数据很缓慢，加载页面更慢...

八、关于

放了一个swiper组件，是一个第三方的组件：Github。下面放了一个登出按钮，点击以后弹出确任的对话框。点击确定，通过导航器的resetTo方法直接跳转到登录界面，并重置掉路由栈。

功能比较简单就不做过多介绍。

九、调试

ctrl+m或者打开菜单，点击'Debug JS Remotely'，可以开启远程调试：

在js代码里console打出的信息都会在Console tab展示出来，报错和警报也会有。还Sources还可以打断点等。但是我开启远程调试后，有些时候非常卡，但帧数并不低。

除了菜单里的'Toggle Inspector'可以简易的查看一下元素以外，还可以安装react-devtools，下载地址：Github。也可以在chrome应用商店搜索安装(需要科学上网工具)。

这个调试插件我安装好以后，并没有使用起。即便在扩展管理里勾选了'允许访文件地址'，在开启远程调试以后并没有探测到rn工程，但是访问豆瓣h5等使用react-js构建的站点时，可以嗅探到，并在chrome开发者工具里成功唤起了react-devtools的tab。Git上查看了issue，发现很多人也有这个问题，重新安装插件也没法解决...可能和chrome版本有关系，太高版本可能会出这个问题。

十、公共组件

这个demo抽象和封装了一些公共组件，但是没有提取完，还有优化点。这里介绍一下components目录下的Dialog对话框：

export default class Dialog extends Component {
    constructor (props){
        super(props);

        this.state = {
            show: false
        };
    }

    async showDialog (){
        await this.setState({show: true});
    }

    async hideDialog (){
        await this.setState({show: false});
    }

    render (){
        return (
            <Modal
                visible={this.state.show}
                animationType='slide'
                transparent={true}
                onShow={() => {}}
                onRequestClose={() => {}}
            >
                <View style={sty.modalStyle}>
                    <View style={sty.subView}>
                        <Text style={sty.titleText}>{this.props.title || '提示'}</Text>
                        <Text style={sty.contentText}>{this.props.content || '确定吗？'}</Text>
                        <View style={sty.horizontalLine}></View>
                        <View style={sty.buttonView}>
                            <TouchableHighlight
                                underlayColor='transparent'
                                style={sty.buttonStyle}
                                onPress={() => {
                                    this.props.cancelAction && this.props.cancelAction();
                                    this.hideDialog.bind(this)();
                                }}
                            >
                                <Text style={sty.buttonText}>取消</Text>
                            </TouchableHighlight>
                            <View style={sty.verticalLine}></View>
                            <TouchableHighlight
                                underlayColor='transparent'
                                style={sty.buttonStyle}
                                onPress={() => {
                                    this.props.okAction && this.props.okAction();
                                    this.hideDialog.bind(this)();
                                }}
                            >
                                <Text style={sty.buttonText}>确定</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
}

十一、总结

1. windows下的安装环境的坑确实很多，而且这还只跑是在模拟器上，如果真机测试的话，不同机型、厂商应该会有适配的问题出现。mac下的表现应该要好得多，毕竟大家都说ios才是亲儿子。相信安卓方面以后还会不断的优化。如果需要一套代码同时跑安卓和ios两个平台，底层一定需要做组件封装，来屏蔽平台的差异。业务开发的时候，就不太需要考虑平台差异了。

2. 调试的提示信息有时候不太明确，需要挨着排查代码。

3. 布局和样式需要适应。

4. 组件使用上的限制文档没有明确提出，很多时候都是用到那里，那样写了，才发现不对。

5. html现在都讲究结构和样式分离，结构和逻辑分离。jsx又把我们拉回了以前的时代。

6. rn的生态圈还是很好的。

7. 其他 ...

以上希望对学习react native的同学有所帮助。不对的地方也请指出。

最后分享一个github上找到的一个不错的react native系列文章，包含作者原创和翻译的各种资料，原理、构架设计、性能优化、离线打包、增量更新都有介绍，入门rn以后可以看看，一定会有帮助的，可以基于此重构你的demo。