在react-native中使用组件的单选按钮功能

时间:2019-06-12 11:24:44

标签: react-native

我需要访问组件中的单选按钮功能,并且我要通过平面列表将主容器中的数组传递给我,但是我没有获得所需的单选按钮功能。我已经在listradio组件中编写了radiobutton功能,并访问了prop单选按钮主文件中的方法

//Container(Main File)

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import FlatlistComponent from "../../Components/RadioButtons/FlatlistComponent";
import RNListRadio from "../../Components/RadioButtons/RNListRadio";
import { Constants, Images } from "../../Themes";
export default class RNRadioButton extends Component {
  constructor() {
    super();
    this.state = {
      radioChecked: "",
      data: Constants.list
    };
    this.renderItem = this.renderItem.bind(this);
    this.onCheck = this.onCheck.bind(this);
  }
  onCheck(index) {
    //alert("lskda" + JSON.stringify(index));
    this.props.onCheck(index);
    // this.setState({
    //   radioChecked: index
    // });
  }
  renderItem = ({ item, index }) => {
    //  alert("item" + JSON.stringify(item));
    // Below we can call list radio button  and pass item index adn method to it
    return (
      <RNListRadio
        item={item}
        index={index}
        //  onCheck={this.onCheck.bind(this, index)}
        //  radioChecked={this.state.radioChecked}
      />
    );
  };
  render() {
    return (
      <View
        style={{
          flex: 1
          // alignItems: "center",
          // justifyContent: "center",
          // backgroundColor: "red"
        }}
      >
        {/*Here we display the flatlist component and passes our data  into it*/}
        <FlatlistComponent
          renderItem={this.renderItem}
          data={this.state.data}
          extraData={this.state}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  topView: {
    flex: 0.25
  },
  middleView: {
    flex: 0.5,
    justifyContent: "center",
    alignItems: "center"
  },
  lastView: { flex: 0.25 }
});

预期:我需要单选按钮功能

实际:我正在获得复选框功能

0 个答案:

没有答案