基于React Native的多选按钮和表格的实现

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  Dimensions,
  TextInput,
} from "react-native";
import { globalStyles } from "../../../res/styles/GlobalStyles";
import { strings } from "../../language/I18n";
import { StatusBar, NavigationBar } from "react-native-icenter-component";

import BaseComponent from "../common/BaseComponent";
import { goToMain } from "../../utils/Native";

const screenWidth = Math.round(Dimensions.get("screen").width);
export default class ChooseEntrance extends BaseComponent {

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,  // 没用上
      multiData:[
        {"id":"0", "name":"蓝剑", select:true},
        {"id":"1", "name":"青年奖", select:false},
        {"id":"2", "name":"青年领军", select:false},
        {"id":"3", "name":"6-7级专家", select:false},
        {"id":"4", "name":"1-3年后备生", select:false},
        {"id":"5", "name":"四层后备", select:false},
      ],
    };
  }
  _selectMultiItemPress(item){
    
    this.state.multiData[item.id].select = !item.select;
    this.setState({multiData: this.state.multiData});
  }

  _renderMultiMark(){
    let multiData = this.state.multiData;
    let menuArr = [];
    for (let i = 0; i < multiData.length; i++) {
      let item = multiData[i];
      
        menuArr.push(
          <TouchableOpacity
            onPress={ () => this._selectMultiItemPress(item)}
            style={[
              styles.anniuContainer,
              {backgroundColor: item.select ? "#D6E9FF" : "#F5F5F5"}
            ]}>
            <Text
              style = {{color: item.select ? "#0077FF" : "#1A1A1A",
              fontSize: 11,
              textAlign: "center"
              }}>
                {item.name}
              </Text>
          </TouchableOpacity>
        ) 
    }
    return (
      <View style={{
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "flex-start",
        width: "100%",
        padding: 10,
      }}>
        {menuArr}
      </View>
    )
  }

  render() {
    return (
      <View style={globalStyles.root_container}>
        <StatusBar />
        <NavigationBar
          hiddenLeftTitle={false}
          title={"员工全收入明细"}
          navigation={this.props.navigation}
          leftCallback={() => {
            this.props.navigation.pop() || goToMain();
          }}
        />

        <View
          style={{
            flexDirection: "row",
            marginLeft: 10,
            marginRight: 60,
            height: 30,
            backgroundColor: "#E5E5E5",
            borderRadius: 50,
          }}
        >
          <Image
            source={require("./搜索.png")}
            style={{
              top: 5,
              marginHorizontal: 5,
              width: 20,
              height: 20,
              resizeMode: "contain",
            }}
          />
          <TextInput placeholder="  输入姓名/工号搜索，支持多人查询" />
          <Image
            source={require("./过滤.png")}
            style={{
              top: 5,
              left: 50,
              width: 20,
              height: 20,
              resizeMode: "contain",
            }}
          />
        </View>       

        <View>
          {this._renderMultiMark()}
        </View>

        <View>{this.renderModalBox()}</View>
      </View>
    );
  }

  renderModalBox = () => {
    return (
      <View
        style={{
          marginHorizontal: 10,
          borderColor: "#D9D9D9",
          borderWidth: 1,
          height: 87,
        }}
      >
        <View
          style={{
            flexDirection: "row",
            backgroundColor: "#EEEEEE",
            borderColor: "#D9D9D9",
            borderBottomWidth: 0.5,
            height: 28,
          }}
        >
          <Text style={styles.textStyle}>工资津贴</Text>
          <Text style={styles.textStyle}>年终奖</Text>
          <Text style={styles.textStyle}>过程奖</Text>
          <Text style={styles.textStyle}>递延奖</Text>
          <Text style={styles.textStyle}>三年奖</Text>
          <Text style={styles.textStyle}>其他收入</Text>
        </View>
        <View
          style={{
            flexDirection: "row",
            borderColor: "#D9D9D9",
            borderBottomWidth: 0.5,
            height: 28,
          }}
        >
          <Text style={styles.textStyle}> 80,000.8</Text>
          <Text style={styles.textStyle}> 69,000.0</Text>
          <Text style={styles.textStyle}> 12,000.3</Text>
          <Text style={styles.textStyle}> 37,000.6</Text>
          <Text style={styles.textStyle}> -</Text>
          <Text style={styles.textStyle}> -</Text>
        </View>
        <View
          style={{
            flexDirection: "row-reverse",
            borderColor: "#D9D9D9",
            height: 28,
          }}
        >
          <Text style={{ fontSize: 12, textAlignVertical: "center" }}>
            合计: 490.500.1
          </Text>
        </View>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  anniuContainer: {
    
    width: "22%",
    height: 30,
    margin: 5,
    borderRadius: 8,
    justifyContent: "center",
  },

  textStyle: {
    fontSize: 12,
    borderColor: "#D9D9D9",
    borderRightWidth: 0.5,
    width: (screenWidth - 21) / 6,
    textAlign: "left",
    textAlignVertical: "center",
  },

  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
},
});