Javascript 如何在react native paper单选按钮中切换单选按钮和标题

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

下面是我的代码

                  <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>

handleChange（//此处设置值“1”或“2”）}
value={values.i_am}
>

handleChange（//此处设置值“1”或“2”）}
value={values.i_am}
>

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

下面是代码示例。

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;

import*as React from“React”；
从“react native”导入{View，StyleSheet}；
从“react native paper”导入{RadioButton，Text}；
常量MyComponent=（）=>{
const[value，setValue]=React.useState（1）；
返回(
设置值（新值）}
value={value}
>
1.
2.
);
};
const styles=StyleSheet.create({
按钮容器：{
flexDirection:“行”，
对齐项目：“中心”，
},
标签：{flex:1，textAlign:“right”，marginRight:16}，
});
导出默认MyComponent；

它将这样显示

---

我希望这对您有所帮助

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

下面是代码示例。

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;

import*as React from“React”；
从“react native”导入{View，StyleSheet}；
从“react native paper”导入{RadioButton，Text}；
常量MyComponent=（）=>{
const[value，setValue]=React.useState（1）；
返回(
设置值（新值）}
value={value}
>
1.
2.
);
};
const styles=StyleSheet.create({
按钮容器：{
flexDirection:“行”，
对齐项目：“中心”，
},
标签：{flex:1，textAlign:“right”，marginRight:16}，
});
导出默认MyComponent；

它将这样显示

---

我希望这对您有所帮助

解决方案是使用flexDirection=>

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

---

解决方案是使用flexDirection=>

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

我想更改样式亲爱的，更改文本的侧面，按钮现在显示为：“文本✓，我希望它是：✓ 文本“我想改变样式亲爱的，改变文本的侧面，现在按钮显示为：”文本✓，我希望它是：✓ 文本“好主意..但是文本不可点击好主意..但是文本不可点击