[英]How to switch radio button and title in react native paper radio button
i use react native paper radio button but it shows the text on the left and the radio button on the right like: "Text ✓", i want the button to be on the left and the text on the right i want it to be: "✓ Text"我使用 react native paper 单选按钮,但它显示左侧的文本和右侧的单选按钮,例如:“文本 ✓”,我希望按钮位于左侧,右侧的文本我希望它是: “✓ 文字”
this is my code below这是我下面的代码
<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>
The solution is by using flexDirection =>解决方案是使用 flexDirection =>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
style={{ flexDirection: 'row-reverse', alignSelf: 'flex-start' }}
/>
<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>
You can customize it like this by using your own custom views.您可以使用自己的自定义视图来自定义它。
Here is the code example.这是代码示例。
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;
It will be shown like this会这样显示
I hope this help you out我希望这可以帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.