如何在反应本机纸单选按钮中切换单选按钮和标题

Question

我使用 react native paper 单选按钮，但它在左侧显示文本，在右侧显示单选按钮，如：“文本 ✓”，我希望按钮在左边，文字在右边我希望它是：“✓ 文本”

下面是我的代码

                  <RadioButton.Group
                    onValueChange={handleChange('i_am')}
                    value={values.i_am}
                  >
                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                    />
                    <RadioButton.Item
                      label="2"
                      value="2"
                      color="#1E6DAD"
                    />
                  </RadioButton.Group>

Answer 1

                  <RadioButton.Group
                    onValueChange={()=>handleChange(//here set the value of "1" or "2")}
                    value={values.i_am}
                  >
                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                    />
                    <RadioButton.Item
                      label="2"
                      value="2"
                      color="#1E6DAD"
                    />
                  </RadioButton.Group>

Answer 2

您可以使用自己的自定义视图对其进行自定义。

这是代码示例。

import * as React from "react";
import { View, StyleSheet } from "react-native";
import { RadioButton, Text } from "react-native-paper";

const MyComponent = () => {
  const [value, setValue] = React.useState(1);

  return (
    <RadioButton.Group
      onValueChange={(newValue) => setValue(newValue)}
      value={value}
    >
      <View style={styles.buttonContainer}>
        <RadioButton value={1} />
        <Text style={styles.label}>1</Text>
      </View>
      <View style={styles.buttonContainer}>
        <RadioButton value={2} />
        <Text style={styles.label}>2</Text>
      </View>
    </RadioButton.Group>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  label: { flex: 1, textAlign: "right", marginRight: 16 },
});

export default MyComponent;

会这样显示

希望对你有所帮助

Answer 3

解决方案是使用 flexDirection =>

                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                      style={{ flexDirection: 'row-reverse', alignSelf: 'flex-start' }}
                    />

如何在反应本机纸单选按钮中切换单选按钮和标题

How to switch radio button and title in react native paper radio button

javascript

react-native

radio-button

react-native-paper