当前位置： 文江博客话题详情

如何获取每个列表项目的2个无线电按钮，以便为列表中的每个项目选择。反应天然

发布于 2025-02-10 02:49:58 字数 10055 浏览 4 评论 0原文

我有一个flatlist，列表中的每个项目都有两个无线电按钮 - 一个用于上升，一个用于下降。我的代码当前允许用户为第一个列表项目选择上升或下降，但是它不允许为其他列表项选择任何无线电按钮（注意：任何一次都应选择一个单选按钮）。这是因为当按下广播按钮时，状态仅使用按钮的 value （'asc''或'desc'），而不是 index 列表项目。我正在努力弄清楚如何使用OnPress（在Radiobutton）或OnvalueChange（在RadioButton.group上）更新这两种情况。

选择单个按钮时，如何更新这两个状态，以便这些按钮可以在其他列表项目上使用，而不仅仅是第一个项目？

链接到零食在这里： https：// https：//snack.expo.dev/@expo.dev/@ Steph510/多反射Radio-buttons

代码如下：

import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  };

  onPress = (index) => {
    this.setState({ 
      selectedIndex: index,       
    });
  }

  onRadiochange = value => {
    this.setState({ 
      radioButtonValue: value,       
    });
  };

  datalist = () => {
    const gridFieldArray = [
      {"text":"Organization","key":"0.6722908010549572"},
      {"text":"Document No","key":"0.13707867638770266"},
      {"text":"Warehouse","key":"0.5240454674464342"},
      {"text":"Business Partner","key":"0.09679684535706568"},
      {"text":"Partner Address","key":"0.5778522746749319"},
      {"text":"Movement Date","key":"0.40039870656646404"}
      ]
    return gridFieldArray;
  };

  render() {
    return (
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>        

          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.datalist()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;   
                
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={this.onRadiochange}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}></Button>
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    paddingTop: 15,
    marginLeft: 20,
    marginTop: 50,
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginRight: 10,
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  button: {
    width: "20%",
    marginHorizontal: 8,
  },
});

我在此处添加我现在有效的解决方案：

import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  };

  onPress = (index) => {
    this.setState({ 
      selectedIndex: index,       
    });
  }

 onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValue: value,   
      selectedIndex: index   
    });
  };

  datalist = () => {
    const gridFieldArray = [
      {"text":"Organization","key":"0.6722908010549572"},
      {"text":"Document No","key":"0.13707867638770266"},
      {"text":"Warehouse","key":"0.5240454674464342"},
      {"text":"Business Partner","key":"0.09679684535706568"},
      {"text":"Partner Address","key":"0.5778522746749319"},
      {"text":"Movement Date","key":"0.40039870656646404"}
      ]
    return gridFieldArray;
  };

  render() {
    return (
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>        

          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.datalist()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;   
                
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}></Button>
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    paddingTop: 15,
    marginLeft: 20,
    marginTop: 50,
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginRight: 10,
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  button: {
    width: "20%",
    marginHorizontal: 8,
  },
});```
原文

I have a FlatList, and each item in the List has two radio buttons - one for ascending and one for descending. My code currently allows a user to select either ascending or descending for the first list item, but it will not allow any of the radio buttons to be selected for the other list items (note: only ONE radio button should be selected at any one time). This is because when a radio button is pressed, the state is only being updated with the value of the button ('asc' or 'desc') but not the index of the list item as well. I am struggling to figure out how to update both of these using either onPress (on the RadioButton), or onValueChange (on RadioButton.Group).

How can I update both of these states when a radio button is selected, so that the buttons will work on the other list items and not just the first one?

Link to Snack is here: https://snack.expo.dev/@steph510/multiple-react-radio-buttons

Code is below:

import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  };

  onPress = (index) => {
    this.setState({ 
      selectedIndex: index,       
    });
  }

  onRadiochange = value => {
    this.setState({ 
      radioButtonValue: value,       
    });
  };

  datalist = () => {
    const gridFieldArray = [
      {"text":"Organization","key":"0.6722908010549572"},
      {"text":"Document No","key":"0.13707867638770266"},
      {"text":"Warehouse","key":"0.5240454674464342"},
      {"text":"Business Partner","key":"0.09679684535706568"},
      {"text":"Partner Address","key":"0.5778522746749319"},
      {"text":"Movement Date","key":"0.40039870656646404"}
      ]
    return gridFieldArray;
  };

  render() {
    return (
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>        

          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.datalist()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;   
                
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={this.onRadiochange}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}></Button>
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    paddingTop: 15,
    marginLeft: 20,
    marginTop: 50,
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginRight: 10,
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  button: {
    width: "20%",
    marginHorizontal: 8,
  },
});

I am adding my now working solution here:

import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  };

  onPress = (index) => {
    this.setState({ 
      selectedIndex: index,       
    });
  }

 onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValue: value,   
      selectedIndex: index   
    });
  };

  datalist = () => {
    const gridFieldArray = [
      {"text":"Organization","key":"0.6722908010549572"},
      {"text":"Document No","key":"0.13707867638770266"},
      {"text":"Warehouse","key":"0.5240454674464342"},
      {"text":"Business Partner","key":"0.09679684535706568"},
      {"text":"Partner Address","key":"0.5778522746749319"},
      {"text":"Movement Date","key":"0.40039870656646404"}
      ]
    return gridFieldArray;
  };

  render() {
    return (
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>        

          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.datalist()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;   
                
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}></Button>
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    paddingTop: 15,
    marginLeft: 20,
    marginTop: 50,
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginRight: 10,
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  button: {
    width: "20%",
    marginHorizontal: 8,
  },
});```

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

对你再特殊 2025-02-17 02:49:58

您需要跟踪每个索引的单选按钮状态。现在，您只有列表中每个组件都依赖的“全局”状态。您可以将该状态设置为一个对象：

  state = { 
    selectedIndex: 0,
    radioButtonValues: {},     
  };
  ...

  onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValues: {
        ...this.state.radioButtonValues,
        [index]: value,
      }       
    });
  };
  ...
  // in render
  <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>

如果在此（父）级别上什么都不了解内部列表的上升/降序，请考虑将组件定义为RenderItem中的组件定义的内联它自己的组成部分具有自己的状态。那么，您无需知道项目的索引即可设置排序顺序，因为每个项目只会影响自身。您必须将所选索引的设置器传递给新组件。如果这没有意义，一个例子将有助于我知道。

You'll need to keep track of the radio button state for each index. Right now you only have one piece of "global" state that each component in the list relies on. You could set up that state as an object instead:

  state = { 
    selectedIndex: 0,
    radioButtonValues: {},     
  };
  ...

  onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValues: {
        ...this.state.radioButtonValues,
        [index]: value,
      }       
    });
  };
  ...
  // in render
  <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>

If nothing at this (parent) level needs to know about the ascending/descending of the internal list, consider moving the component defined inline in your renderItem out to its own component with its own state. Then you wouldn't need to know the index of the item to set the sort order, since each item would only affect itself. You would have to pass in the setter for the selected index to the new component. If this doesn't make sense and an example would help let me know.

回复 原文
夢归不見 2025-02-17 02:49:58

这是我提出的解决方案。感谢所有协助的人：

import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  };

  onPress = (index) => {
    this.setState({ 
      selectedIndex: index,       
    });
  }

 onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValue: value,   
      selectedIndex: index   
    });
  };

  datalist = () => {
    const gridFieldArray = [
      {"text":"Organization","key":"0.6722908010549572"},
      {"text":"Document No","key":"0.13707867638770266"},
      {"text":"Warehouse","key":"0.5240454674464342"},
      {"text":"Business Partner","key":"0.09679684535706568"},
      {"text":"Partner Address","key":"0.5778522746749319"},
      {"text":"Movement Date","key":"0.40039870656646404"}
      ]
    return gridFieldArray;
  };

  render() {
    return (
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>        

          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.datalist()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;   
                
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}></Button>
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    paddingTop: 15,
    marginLeft: 20,
    marginTop: 50,
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginRight: 10,
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  button: {
    width: "20%",
    marginHorizontal: 8,
  },
});```

This is the solution that I came up with. Thanks to all who assisted:

import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  };

  onPress = (index) => {
    this.setState({ 
      selectedIndex: index,       
    });
  }

 onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValue: value,   
      selectedIndex: index   
    });
  };

  datalist = () => {
    const gridFieldArray = [
      {"text":"Organization","key":"0.6722908010549572"},
      {"text":"Document No","key":"0.13707867638770266"},
      {"text":"Warehouse","key":"0.5240454674464342"},
      {"text":"Business Partner","key":"0.09679684535706568"},
      {"text":"Partner Address","key":"0.5778522746749319"},
      {"text":"Movement Date","key":"0.40039870656646404"}
      ]
    return gridFieldArray;
  };

  render() {
    return (
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>        

          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.datalist()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;   
                
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}
                          onPress={() => {this.onPress(index)}}
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}></Button>
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    paddingTop: 15,
    marginLeft: 20,
    marginTop: 50,
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    marginRight: 10,
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  button: {
    width: "20%",
    marginHorizontal: 8,
  },
});```
回复 原文
~没有更多了~

关于作者

风吹雨成花

暂无简介

文章
评论
29 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文