React Native 中的自定义单选按钮

问题描述

我正在尝试使用“视图”和“无线电组”创建自定义按钮，但无法重叠在另一个按钮上。 基本上我要创建这样的东西：

我确实检查了反应纸，但仍然没有运气。

@H_502_8@

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

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

  return (
    <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
      <View>
        <Text>First</Text>
        <RadioButton value="first" />
      </View>
      <View>
        <Text>Second</Text>
        <RadioButton value="second" />
      </View>
    </RadioButton.Group>
  );
};

export default MyComponent;

我正在尝试使用此代码。

有人可以帮我吗？

解决方法

使用以下代码作为组件：

import React from 'react';
import { TouchableOpacity,Image,Text,StyleSheet } from 'react-native';

export default function Radio({ value,changeValue,leftImage,text }) {
    return <TouchableOpacity
        style={radioStyle.btn}
        onPress={changeValue}
    >
        <Image source={leftImage} style={radioStyle.leftImg} />
        <Text style={radioStyle.txt}>{text}</Text>
        {value ? <Image source={require("../assets/images/check-mark.png")} style={radioStyle.tick} /> : null}
    </TouchableOpacity>
}

const radioStyle = StyleSheet.create({
    btn: {
        flexDirection: 'row',alignItems: 'center',backgroundColor: '#c36e02',borderRadius: 15,padding: 15
    },leftImg: { height: 40,width: 40,marginRight: 30,tintColor: 'white',resizeMode: 'contain' },txt: { fontSize: 30,color: 'white' },tick: { position: 'absolute',right: 0,height: 30,width: 30,tintColor: 'white' }
});

在你要使用的页面中导入：

import React,{ useState } from 'react';
import Radio from '../../components/Radio';
import { View } from 'react-native';
export default function parent() {
  const [radioValue,setRadioValue] = useState(false);
  return <View style={{ flex: 1,paddingVertical: 70,paddingHorizontal: 20 }}>
    <Radio
      value={radioValue}
      changeValue={() => setRadioValue(!radioValue)}
      leftImage={require('../../assets/images/wallet-bottom.png')}
      text="Monthly Basis"
    />
  </View>
}

在 leftImage 中传递一个将显示在左侧的图像。

在 text 中传递将显示为收音机标题的文本。

在 value 中传递布尔类型的状态。

在 changeValue 中传递一个改变布尔状态的函数。

输出

,

您可以为视图添加样式，也可以添加图标。 代码如下所示，您可以根据需要更改样式

import * as React from 'react';
import { View,StyleSheet,TouchableOpacity } from 'react-native';
import { RadioButton,Text } from 'react-native-paper';
import { Ionicons,Fontisto } from '@expo/vector-icons';

const styles = StyleSheet.create({
  mainWrapper: {
    backgroundColor: '#c36e01',borderRadius: 10,padding: 10,flexDirection: 'row',justifyContent:'space-between',marginVertical:5
  },});

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

  return (
    <RadioButton.Group
      onValueChange={(newValue) => setValue(newValue)}
      value={value}>
      <TouchableOpacity style={styles.mainWrapper} onPress={()=>setValue('first')}>
       <Fontisto name="date" size={24} color="white" />
        <Text style={{ color: 'white' }}>First</Text>
        <RadioButton value="first" color="white"/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.mainWrapper} onPress={()=>setValue('second')}>
       <Ionicons name="alarm" size={24} color="white" />
        <Text style={{ color: 'white' }}>Second</Text>
        <RadioButton value="second" color="white"/>
      </TouchableOpacity>
    </RadioButton.Group>
  );
};

export default MyComponent;

你可以试试小吃 https://snack.expo.io/X53aqaaCH