react-native-actionsheet弹出框

由于涉及数据隐私，部分私有代码做屏蔽处理，仅限个人学习使用。

callbackActionSheet定义一个callback子组件的函数，函数类型为() => {}
方法体，在componentDidMount执行callbackActionSheet(this.ActionSheet);将ActionSheet子组件对象回传至父组件。
callbackParams定义一个callback子组件参数值的函数，函数类型也为() => {}方法体，在点击index时，将callbackParams(optionsData[index - 1]);相关参数回传至父组件。

import React, { Component } from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import { ActionSheetCustom as ActionSheet } from "react-native-actionsheet";

const CHOOSED_IMAGE = require("./images/actionsheet_choosed.png");

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    width: screenW / 2,
    height: 52
  },
  title: {
    fontSize: font(14),
    color: "#7D7D7D"
  },
  itemContainer: {
    flexDirection: "row",
    width: screenW,
    height: 52
  },
  textArea: {
    width: screenW / 2,
    height: 50,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    textAlign: "center",
    fontSize: font(14),
    color: "#3E3E3E"
  },
  chooseIcon: {
    position: "absolute",
    right: 20
  },
  cancel: {
    width: screenW,
    height: 52,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  }
});

const optionsData = [
  { timeLimit: "文字A", rate: "9%", idx: "1" },
  { timeLimit: "文字B", rate: "8%", idx: "2" },
  { timeLimit: "文字C", rate: "19%", idx: "3" },
  { timeLimit: "文字D", rate: "10%", idx: "4" },
];

export default class EntrustActionSheet extends Component {
  static defaultProps = {
    callbackActionSheet: () => {},
    callbackParams: () => {}
  };

  constructor(props) {
    super(props);

    this.state = {
      onIndex: 1
    };
  }

  componentDidMount = () => {
    const { callbackActionSheet } = this.props;
    callbackActionSheet(this.ActionSheet);
  };

  renderTitle = () => {
    return (
      <View style={{ flexDirection: "row" }}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>文字文字</Text>
        </View>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>文字文字</Text>
        </View>
      </View>
    );
  };

  renderItem = (timeLimit, rate, idx) => {
    const { onIndex } = this.state;
    let visibly = false;

    if (idx === onIndex) {
      visibly = true;
    } else {
      visibly = false;
    }
    return (
      <View style={styles.itemContainer}>
        <View style={styles.textArea}>
          <Text style={styles.text}>{timeLimit}</Text>
        </View>
        <View style={styles.textArea}>
          <Text style={styles.text}>{rate}</Text>
          {visibly ? (
            <Image source={CHOOSED_IMAGE} style={styles.chooseIcon} />
          ) : null}
        </View>
      </View>
    );
  };

  renderCancel = () => {
    return (
      <View style={styles.cancel}>
        <Text style={styles.text}>取消</Text>
      </View>
    );
  };

  onIndexClick = index => {
    const { callbackParams } = this.props;

    if (index === 0) return;
    this.setState({
      onIndex: index
    });
    callbackParams(optionsData[index - 1]);
  };

  render() {
    const optionItems = [];
    optionItems.push(this.renderCancel());
    optionsData.map((obj, idx) => {
      return optionItems.push(
        this.renderItem(obj.timeLimit, obj.rate, idx + 1)
      );
    });

    return (
      <View>
        <ActionSheet
          ref={view => {
            this.ActionSheet = view;
          }}
          title={this.renderTitle()}
          options={optionItems}
          cancelButtonIndex={0}
          onPress={index => {
            this.onIndexClick(index);
          }}
        />
      </View>
    );
  }
}

父组件中调用actionSheet并callback回传

父组件时利用callbackActionSheet和callbackParams属性获取到子组件的对象和参数，并执行setState操作

import EntrustActionSheet from "./entrustActionSheet";

        <EntrustActionSheet
          callbackActionSheet={view => {
            this.ActionSheet = view;
          }}
          callbackParams={data => {
            this.setState({
              timeLimitVal: data.timeLimit,
              rateVal: data.rate
            });
          }}
        />

Map循环使用

Map循环在以上代码中使用到，再次做个记录

const optionItems = [];
    optionItems.push(this.renderCancel());
    optionsData.map((obj, idx) => {
      return optionItems.push(
        this.renderItem(obj.timeLimit, obj.rate, idx + 1)
      );
    });