如何在Flatlist中使用单选按钮-React Native

时间:2018-12-05 12:32:54

标签: android reactjs react-native

我想使用平面列表使用单选按钮创建列表,但是问题是我能够单击单选按钮,在平面列表内部未选中该按钮。

这是我的密码

 <FlatList
                    data={this.state.addressData}
                    horizontal={false}
                    extraData={this.state}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({ item, index }) => (
                        <Card containerStyle={{ backgroundColor: GlobalColors.white, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 10, elevation: 2, padding: 0, borderColor: GlobalColors.white }}>

                            <View style={{ backgroundColor: GlobalColors.white, padding: 15 }}>


                                <View style={SelectAddressStyle.horizontalChangeAddress}>
                                   <Radio style={{marginRight : 10}} selected = {true}></Radio>
                                    <Text style={SelectAddressStyle.txtAddressUserName}>{""}</Text>
                                    <Text style={SelectAddressStyle.addressType}>{"HOME"}</Text>
                                </View>
                                <Text style={SelectAddressStyle.txtAddress}>
                                    {""}
                                </Text>



                            </View>
                        </Card>
                    )} />

2 个答案:

答案 0 :(得分:0)

您有:

<Radio style={{marginRight : 10}} selected = {true}></Radio>

因此它不会变得不受检查。也许尝试传递selected属性。

答案 1 :(得分:0)

Idk,您正在使用哪个软件包进行广播(React本机本身没有广播),但是问题在于,根据代码<Radio style={{marginRight : 10}} selected = {true}></Radio>的这一部分,您总是将true传递给您的selected道具,因此在任何情况下它都不会改变,除非您为其声明了切换功能并将其当前状态存储在组件状态中。例如:

class Example extends component{
    state = {
    radioStatus: false
  }

  toggleRadio = () => {
    const {radioStatus} = this.state;
    this.setState({ radioStatus: !radioStatus})
  };

  render(){
    const {radioStatus} = this.state;
    return(
        <View>
          <Radio selected={radioStatus} onChange={this.toggleRadio} />
        </View>
    )
  }
}