react native底部按钮组件

react native底部按钮组件，多按钮自动换行

一、使用

 const buttonData = [
      { CODE: "submission", title: "退回", type: "1" },
      { CODE: "submission", title: "完成并审批", type: "3" },
    ];
  <ButtonBottom
     buttonData={buttonData }
      operation={(item) => { }}
      navigation={this.props.navigation}
    />

二、效果

三、代码

/**
 *流程按钮
 */

import React, { Component } from "react";
import {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  Dimensions,
} from "react-native";

const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;

class SuperviseButton extends Component<Props> {
  static navigationOptions = {
    header: null,
  };

  constructor(props) {
    super(props);
    this.state = {
      buttonDate: this.props.buttonData,
    };
    this.len = 2;
  }

  render() {
    this.state.buttonDate = this.props.buttonData;

    return (
      <View>
        <View
          style={[
            {
              justifyContent:
                this.state.buttonDate.length <= 2
                  ? "space-around"
                  : "flex-start",
            },
            styles.topWarp,
          ]}
        >
          {this.state.buttonDate.map((button, key) => (
            <View key={key} style={styles.center}>
              <TouchableOpacity
                onPress={() => {
                  this.props.operation && this.props.operation(button);
                }}
                style={[
                  styles.bottom,
                  this.state.buttonDate.length == 1
                    ? { width: width - 20 }
                    : {},
                ]}
              >
                <Text numberOfLines={1} style={styles.title}>
                  {button.title}
                </Text>
              </TouchableOpacity>
            </View>
          ))}
        </View>
      </View>
    );
  }
}

export default SuperviseButton;
const styles = StyleSheet.create({
  topWarp: {
    flexDirection: "row",

    alignItems: "center",
    backgroundColor: "#FFFFFF",
    flexWrap: "wrap",
  },
  center: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    paddingLeft: 10,
    paddingRight: 10,
    marginBottom: 10,
    marginTop: 10,
  },

  title: {
    fontSize: 14,
    color: "#FFFFFF",
  },
  bottom: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0083F1",
    borderRadius: 5,
    height: 39,
    paddingLeft: 10,
    paddingRight: 10,
  },
});