Install

npm install react-native-flexible-button  --save

仓库地址： https://github.com/yylgit/react-native-flexible-button.git

API

Props |Type| Description ---|---|--- text | PropTypes.string | 按钮显示的文本，当按钮有子元素时，将覆盖text onPress | PropTypes.func | 传递点击事件 size | PropTypes.string | 控制按钮的大小，可取的值为：xs、sm、default、lg，默认default type | PropTypes.string | 控制按钮的颜色，可取的值为：default、primary、success、info 、warning、danger、link、main，默认default activityIndicatorColor | PropTypes.string | 控制loading的颜色，默认white containerStyle | View.propTypes.style | 自定义按钮外层的样式 textStyle | Text.propTypes.style | 自定义按钮文本的样式 isLoading | PropTypes.bool | 是否在加载中的属性 disabled | PropTypes.bool | 是否在disabled状态 disabledContainerStyle | View.propTypes.style | 自定义disabled状态按钮外层的样式 disabledTextStyle | Text.propTypes.style | 自定义disabled状态按钮文本的样式 props | | 可以指定任意TouchableOpacity的属性，都会透传过去，例如常用的onPressIn、onPressOut、onLongPress等等。 children | string, number, React.Element,or array | children指代button里的子节点，如果子节点是string或者number类型，则渲染在Text元素内，如果是array或者React.Element类型则直接渲染。

example

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import Button from '@scfe/react-native-button';
import Icon from 'react-native-vector-icons/FontAwesome';
class TestButton extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
      <Button size='lg' text="（大按钮）size='lg'" />
        </View>
        <View style={styles.row}>
      <Button  text="（默认尺寸）" />
        </View>
        <View style={styles.row}>
      <Button size='sm'   text="（小按钮) size='sm'" />
        </View>
        <View style={styles.row}>
      <Button size='xs'   text="（超小尺寸) size='xs'" />
        </View>
        <View style={styles.row}>
      <Button type="default"  text="（默认样式）type=default" />
        </View>
        <View style={styles.row}>
      <Button type="primary"  text="（首选项）type=type=primary" />
        </View>
        <View style={styles.row}>
      <Button type="success"  text="（成功）type=success" />
        </View>
        <View style={styles.row}>
      <Button type="info"  text="（一般信息）type=info" />
        </View>
        <View style={styles.row}>
      <Button type="warning"  text="（警告）type=warning" />
        </View>
        <View style={styles.row}>
      <Button type="danger"  text="（危险）type=danger" />
        </View>
        <View style={styles.row}>
      <Button type="main"  text="（美团色）type=main" />
        </View>
        <View style={styles.row}>
      <Button  type="link" text="（链接）Link" />
        </View>
        <View style={styles.row}>
      <Button  disabled={true} text="disabled" />
        </View>
        <View style={styles.row}>
      <Button  isLoading={true} activityIndicatorColor="black" text="loading" />
        </View>
        <View style={styles.row}>
      <Button type="danger" isLoading={true}  text="loading" />
        </View>


        <View style={styles.row}>
          <Button>
            <View style={{flexDirection: 'row'}}>
              <Icon name={"desktop"} size={18} color='#000'/>
              <Text style={{marginLeft: 5}}>自定义内容</Text>
            </View>
          </Button>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    paddingLeft: 10,
    paddingRight: 10
  },
  row: {
    marginTop: 5
  }
});

export default TestButton;

Screenshots

使用RT开发组件

使用rt工具开发React Native组件

使用rt生成的RN版本较低，需要升级React-Native

这里升级成如下版本

"dependencies": {
    "react": "15.3.0",
    "react-native": "0.32.0"
  }

升级后，直接运行如果build fail

解决办法：

TARGETS->Build Settings->Link->Other Linker Flags 下添加-lc++

如果遇到js报错,是babel的原因

transforming [========================================] 100% 399/400Error while persisting cache: TransformError: /Users/zzx/MyProject/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/zzx/MyProject/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/zzx/MyProject/node_modules/react-deep-force-update/.babelrc.stage

原因： 新版本用的是babel 6版本，可是有些依赖的库并不是这个版本，就会导致这个错，所以解决方案就是把babel删了，升级依赖。

解决方法：

尝试1：

手动删除/Users/zzx/MyProject/node_modules/react-deep-force-update/.babelrc 然后重启就解决了

尝试2：

修改package.json文件

"scripts": {
  "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
  "postinstall": "npm run clean:babelrc"
}

删除依赖重新安装

rm -rf node_modules
npm install