React native 如何在react native flatlist中一次选择一个单选按钮

我使用react native单选按钮实现一个带有单选按钮的平面列表，如图所示

[！[在此处输入图像描述][1][1]

但我无法在平面列表中一次选择一个单选按钮

这是我的密码

import React from 'react';
import { StyleSheet, View, Text, FlatList, TouchableOpacity, Image, LayoutAnimation, UIManager, Platform } from 'react-native';
import RadioButton from 'react-native-radio-button';
import PHARMACY from './api/mockPharmacyList';
import { Colors, Fonts } from '../../styles';

interface IState {
    selected: number;
    selectedIndex: number;
    data: any;
    expanded: boolean;
    checked: boolean;
}


export class TransferToPharmacy extends React.Component<{}, IState> {
    constructor(props) {
        super(props);
        this.state = {
            data: PHARMACY,
            selected: 0,
            selectedIndex: 0,
            expanded: true,
            checked: false,
        };
        this.onPress = this.onPress.bind(this);
        this.renderItem = this.renderItem.bind(this);
        this.renderSeparator = this.renderSeparator.bind(this);
        this._keyExtractor = this._keyExtractor.bind(this);
        this.changeLayout = this.changeLayout.bind(this);
        this.onCheck = this.onCheck.bind(this);

        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true);
        }
    }

    changeLayout = () => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.setState({ expanded: false });
    }

    getInitialState() {
        return {
            value: 0,
        };
    }
    onPress(value) {
        this.setState({ selected: value });
    }

    _keyExtractor = (item, index) => item.id;

    onCheck = () => {
        const { checked } = this.state;
        if (checked === true) {
            this.setState({ checked: false  });
        } else {
            this.setState({ checked: true  });
        }
    }

    renderItem(data) {
        const { item } = data;
        return (
                <View style={styles.itemBlock}>

              <TouchableOpacity   >

                    <View style={styles.arrowIconStyle}>
                        <Text style={styles.pharmacyText}>{item.name}</Text>
                        <RadioButton
                            innerColor={Colors.darkBlue}
                            outerColor={Colors.lightGray}
                            animation={'bounceIn'}
                            isSelected={this.state.selectedIndex === 0}
                            onPress={this.onPress}
                        />
                    </View>
                    </TouchableOpacity>
                    <Text>{item.key1}</Text>

                 <View style={{ height: this.state.expanded === true ?  90 : 0, overflow: 'hidden' }}>

                        <View style={{ flexDirection: 'row', marginTop: 5, padding: 10 }}>
                             <Image style={[styles.itemImage, { width: 15, height: 15, margin: 1 }]} source={require('./images/map_pic_icon.png')} />
                             <Text style={styles.itemText}>{item.location}</Text>
                         </View>

                         <View style={{ flexDirection: 'row', marginTop: 5, padding: 10 }}>
                            <Image style={[styles.itemImage, { width: 15, height: 15, margin: 1 }]} source={require('./images/phone_icon.png')} />
                             <Text style={styles.itemText}>{item.phone}</Text>
                         </View>

                     </View>
                </View>
        );
    }

    renderSeparator() {
        return <View style={styles.separator} />;
    }
    render() {
        return (
            <View style={styles.container} >
                <Text style={styles.textStyle}>Transfer to Pharmacy</Text>

                <View style={styles.childViewStyle}>
                    <FlatList
                        keyExtractor={this._keyExtractor}
                        data={this.state.data}
                        renderItem={this.renderItem}
                        ItemSeparatorComponent={this.renderSeparator}
                    />
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    textStyle: {
        fontSize: 18,
        color: Colors.black,
        marginTop: 30,
        marginLeft: 20
    },
    childViewStyle: {
        margin: 20,
    },
    itemBlock: {
        paddingVertical: 15,
    },
    itemImage: {
        width: 50,
        height: 50,
        borderRadius: 25,
        margin: 10
    },
    itemText: {
        fontSize: 16,
        justifyContent: 'center',
        color: Colors.darkySkyBlue
    },
    itemName: {
        fontSize: 20,
        color: Colors.black,
    },
    separator: {
        borderRadius: 4,
        borderWidth: 1,
        borderColor: Colors.lightGray,
    },
    pharmacyText: {
        fontSize: 16,
        fontFamily: Fonts.bold,
        color: Colors.black

    },
    radioStyle: {
        marginTop: 10,
        marginRight: 50,
        justifyContent: 'space-between'
    },
    arrowIconStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10
        // flex: 1
    }
});

在renderItem方法中，我已经这样修改了它

onPress( index) {
        this.setState({  selected: index, });
    }

const { item, index } = data;
 <RadioButton
                            innerColor={Colors.darkBlue}
                            outerColor={Colors.lightGray}
                            animation={'bounceIn'}
                            isSelected={this.state.selected === index}
                            onPress={() => this.onPress(index)}
                        />

---

我正在导出此常量并在类中导入它，并将其设置为状态变量“data”。

首先，您需要获得当前项的索引，如下所示：

const{item，index}=data

获取当前项目的索引后，您可以检查当前单选按钮是否被选中，要更改单选按钮，您需要将当前索引的值传递给
onPress
功能

<RadioButton
  innerColor={Colors.darkBlue}
  outerColor={Colors.lightGray}
  animation={'bounceIn'}
  isSelected={this.state.selected === index}
  onPress={() => this.onPress(index)}
/>

this.onPress（index）}
/>
首先，您需要获得当前项目的索引，如下所示：

const{item，index}=data

获取当前项目的索引后，您可以检查当前单选按钮是否被选中，要更改单选按钮，您需要将当前索引的值传递给
onPress
功能

<RadioButton
  innerColor={Colors.darkBlue}
  outerColor={Colors.lightGray}
  animation={'bounceIn'}
  isSelected={this.state.selected === index}
  onPress={() => this.onPress(index)}
/>

this.onPress（index）}
/>
您可以在
renderItem

renderItem = ({item, index}) => {
 .....
<RadioButton
  innerColor={Colors.darkBlue}
  outerColor={Colors.lightGray}
  animation={'bounceIn'}
  isSelected={this.state.selectedIndex === index}
  onPress={() => {this.onPress(index)}}
/>
}

并使用
extraData道具更新
FlatList
，因为
FlatList
需要重新呈现为

<FlatList
   keyExtractor={this._keyExtractor}
   data={this.state.data}
   renderItem={this.renderItem}
   ItemSeparatorComponent={this.renderSeparator}
   extraData={this.state}
 />



您可以在零食中参考您可以在
renderItem中执行类似操作

renderItem = ({item, index}) => {
 .....
<RadioButton
  innerColor={Colors.darkBlue}
  outerColor={Colors.lightGray}
  animation={'bounceIn'}
  isSelected={this.state.selectedIndex === index}
  onPress={() => {this.onPress(index)}}
/>
}

并使用
extraData道具更新
FlatList
，因为
FlatList
需要重新呈现为

<FlatList
   keyExtractor={this._keyExtractor}
   data={this.state.data}
   renderItem={this.renderItem}
   ItemSeparatorComponent={this.renderSeparator}
   extraData={this.state}
 />



当您按下单选按钮时，您可以在“零食”
中查看是否已检查记录了哪个值？原因是当您按下单选按钮时，未将值索引值传递给i是否已检查记录了哪个值？原因是当选中平面列表中的第一个单选按钮时，没有将值索引值传递给它，但我无法选择另一个单选按钮。我正在将
selectedIndex
与
index
进行比较，我将其更改为
selected
，我在问题中附上了输出的屏幕截图，请在选中平面列表中的第一个单选按钮后进行检查，但我无法选择另一个单选按钮。我正在将
selectedIndex
与
index
进行比较，我将其更改为
selected
我已附上问题中的输出屏幕截图，请检查是否有更改，是否可以验证您的解决方案是否有效，但问题是我的代码在这里，我不明白您是否可以详细说明。我已将模拟数据用于平面列表，并将其保存在单独的tsx文件中，导出我当前类中的const PHARMACY，并将该药店分配给一个州变量“data”，在我的平面列表中，我只是调用data={this.state.data}来代替数据。这些是从“/api/mockPharmacyList”导入的代码行；this.state={data:PHARMACY}，我看不出有任何问题，因为您正在向flatlist提供数据。你对此有什么问题？媒体上有变化，你能验证一下吗？你的解决方案是否有效，但问题是我的代码在这里，我不明白，你能详细说明一下吗？我使用了FlatList的模拟数据，并将其保存在单独的tsx文件中，导出我当前类中的const PHARMACY，并将该药房分配给状态变量“data”，在我的平面列表中，我只是调用data={this.state.data}这些是从“./api/mockPharmacyList”导入的代码行；this.state={data:PHARMACY}，我看不出有任何问题，因为您正在向flatlist提供数据。你对此有什么意见？