React Native学习之安装Nuclide与AlertIOS API

Nuclide

安装Mac下React Native的开发工具Nuclide

FaceBook官方推荐：Nuclide

只支持Mac，基于Atom（Github的）（Atom最大的特色就是可以安装很多的插件来完成我们的需求）炫酷插件。

Atom：https://atom.io/
Nuclide：https://nuclide.io/
Nuclide开源：https://github.com/facebook/nuclide

首先安装Atom，然后安装Nuclide：

apm install nuclide

打开atom，如果nuclide安装成功，则可以看到nuclide的欢迎界面。

如果打开nuclide出现问题，需要安装flow，一个静态的对js类型检查器

brew install flow

要想nuclide支持代码自动补全 需要安装两个插件：

• atom-react-native-css
• atom-react-native-autocomplete

更新所有工具：

brew update && brew upgrade

推荐安装 Nuclide 代码自动补全提示的插件：

• atom-react-native-css
• atom-react-native-autocomplete

Atom菜单 -> Packages -> Settings View -> Open -> 左侧边栏点击 Install 标签

搜索并安装atom-react-native-css和atom-react-native-autocomplete

Mac下保存快捷键：Mac真机(command+s) ，Windows下Mac虚拟机(win+s)。也可以安装 Nuclide 自动保存代码的插件：autosave

autosave 已经存在于核心包 Core Packages 中，只需要 Setting enabled

AlertIOS

AlertIOS的静态方法有两个：

• alert(title, message, [] buttons)：普通对话框
• prompt(title, message, [] buttons)：提供输入的对话框

如果buttons为空数组，默认也会有一个ok按钮，如果数据的长度过长，按钮就会垂直排列！

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AlertIOS,
} from 'react-native';

class RNAPP extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.item} onPress={this.tip}>提示对话框</Text>
                <Text style={styles.item} onPress={this.input}>输入对话框</Text>
            </View>
        );
    }

    tip() {
        AlertIOS.alert('提示', '欢迎观临 React Native APP 开发社区', [
            {
                text: '取消',
                onPress: () => {
                    alert('您点击了取消按钮');
                }
            },
            {
                text: '确认',
                onPress: () => {
                    alert('您点击了确认按钮');
                }
            },
        ]);
    }

    input() {
        AlertIOS.prompt('提示', '请输入您的用户名', [
            {
                text: '取消',
                onPress: () => {
                    alert('您点击了取消按钮');
                }
            },
            {
                text: '确认',
                onPress: (text) => {
                    alert(text);
                }
            },
        ]);
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:25,
    },
    item:{
        marginTop:10,
        marginLeft:5,
        marginRight:5,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
    }
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);