Reactjs 有没有办法在react native中通过单选按钮绘制形状？

新的反应是本地的。我使用软件包

react native simple radio-n button

的单选按钮制作了这个屏幕。我想用线条或其他东西（附在下面的示例）连接所选按钮以形成一个形状。我还附上了屏幕的源代码。应该使用哪些软件包来实现这一点？我在react native中查看一些形状库，但发现自己一窍不通。我认为也有可能使用项目的绝对位置（单选按钮）和使用

样式

，但我也不知道如何处理

import React，{useState}来自“React”；
从“react native”导入{View，StyleSheet，Image}；
从“react native simple单选按钮”导入RadioForm；
从“本机库”导入{Content、Card、CardItem、Text}；
常量NTCPDiamondScreen=（）=>{
const[value，setValue]=useState（“”）；
var技术=[
{标签：“超高”，值：“超高”}，
{标签：“高”，值：“高”}，
{标签：“中等”，值：“中等”}，
{标签：“低”，值：“低”}，
];
变量速度=[
{标签：“常规”，值：“常规”}，
{标签：“快”，值：“快”}，
{标签：“时间关键型”，值：“时间关键型”}，
{标签：“闪电战”，价值：“闪电战”}，
];
变量复杂性=[
{label:“Assembly”，value:“Assembly”}，
{标签：“系统”，值：“系统”}，
{标签：“数组”，值：“数组”}，
];
var新奇性=[
{标签：“导数”，值：“导数”}，
{标签：“平台”，值：“平台”}，
{标签：“突破”，价值：“突破”}，
];
返回(
创造新钻石
技术
{
设置值（值）；
console.log（值）；
}}
按钮颜色={33CCFF}
按钮大小={10}
selectedButtonColor={“#33CCFF”}
标签样式={{
fontFamily：“无衬线灯”，
字体大小：7，
}}
样式={{}
/>
新颖性
{
设置值（值）；
console.log（值）；
}}
按钮颜色={33CCFF}
按钮大小={10}
selectedButtonColor={“#33CCFF”}
标签样式={{
fontFamily：“无衬线灯”，
字体大小：7，
}}
/>
复杂性
{
设置值（值）；
console.log（值）；
}}
按钮颜色={33CCFF}
按钮大小={10}
selectedButtonColor={“#33CCFF”}
标签样式={{
fontFamily：“无衬线灯”，
字体大小：7，
}}
/>
步伐
{
设置值（值）；
console.log（值）；
}}
按钮颜色={33CCFF}
按钮大小={10}
selectedButtonColor={“#33CCFF”}
标签样式={{
fontFamily：“无衬线灯”，
字体大小：7，
}}
样式={{}
/>
);
};
const styles=StyleSheet.create({
视图样式：{
弹性：1，
背景颜色：“fff”，
},
第二视图：{
flexDirection:“行”，
},
文本标题样式：{
fontFamily：“无衬线灯”，
颜色：“fff”，
paddingLeft:80，
},
});
NTCPDiamondScreen.navigationOptions={
标题：（）=>(
),
};
导出默认NTCPDiamondScreen；

---

我怎样才能做到这一点？需要帮助。

学习手势处理。使用

position:“absolute”

可能是一个很好的解决方案，我想您可以在每个点之间绘制所有可能的线（），并隐藏/显示选定的线，直到不确定如何绘制，因为我有不同的

RadioForm

s包装在不同的视图中。所以画在他们身上看起来很奇怪。另外，我如何可能绘制所有图像（根据需要）并隐藏它们，并仅显示所需的图像？学习手势处理。使用

position:“absolute”

可能是一个很好的解决方案，我想您可以在每个点之间绘制所有可能的线（），并隐藏/显示选定的线，直到不确定如何绘制，因为我有不同的

RadioForm

s包装在不同的视图中。所以画在他们身上看起来很奇怪。此外，我如何可能绘制所有图像（根据需要），并隐藏它们，仅显示所需的图像？

import React, { useState } from "react";
import { View, StyleSheet, Image } from "react-native";

import RadioForm from "react-native-simple-radio-button";

import { Content, Card, CardItem, Text } from "native-base";

const NTCPDiamondScreen = () => {
  const [value, setValue] = useState("");

  var technology = [
    { label: "Super-high", value: "Super-high" },
    { label: "High", value: "High" },
    { label: "Medium", value: "Medium" },
    { label: "Low", value: "Low" },
  ];

  var pace = [
    { label: "Regular", value: "Regular" },
    { label: "Fast", value: "Fast" },
    { label: "Time-critical", value: "Time-critical" },
    { label: "Blitz", value: "Blitz" },
  ];

  var complexity = [
    { label: "Assembly", value: "Assembly" },
    { label: "System", value: "System" },
    { label: "Array", value: "Array" },
  ];

  var novelty = [
    { label: "Derivative", value: "Derivative" },
    { label: "Platform", value: "Platform" },
    { label: "Breakthrough", value: "Breakthrough" },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <Content padder>
        <Card>
          <CardItem header bordered style={{ backgroundColor: "#33CCFF" }}>
            <Text style={styles.textTitleStyle}>Create New Diamond</Text>
          </CardItem>
          <CardItem bordered>
            <View style={styles.viewStyle}>
              <View>
                <View
                  style={{
                    paddingLeft: 145,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 10,
                      fontFamily: "sans-serif-light",

                      fontStyle: "italic",
                      paddingLeft: 30,
                      color: "#B4BFC3",
                    }}
                  >
                    Technology
                  </Text>
                  <RadioForm
                    radio_props={technology}
                    initial={-1}
                    onPress={(value) => {
                      setValue(value);
                      console.log(value);
                    }}
                    buttonColor={"#33CCFF"}
                    buttonSize={10}
                    selectedButtonColor={"#33CCFF"}
                    labelStyle={{
                      fontFamily: "sans-serif-light",

                      fontSize: 7,
                    }}
                    style={{}}
                  />
                </View>
                <View style={styles.secondView}>
                  <View
                    style={{
                      marginRight: 10,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 10,
                        fontFamily: "sans-serif-light",

                        fontStyle: "italic",
                        paddingLeft: 30,
                        paddingBottom: 5,
                        color: "#B4BFC3",
                      }}
                    >
                      Novelty
                    </Text>
                    <RadioForm
                      radio_props={novelty}
                      initial={-1}
                      formHorizontal={true}
                      labelHorizontal={false}
                      onPress={(value) => {
                        setValue(value);
                        console.log(value);
                      }}
                      buttonColor={"#33CCFF"}
                      buttonSize={10}
                      selectedButtonColor={"#33CCFF"}
                      labelStyle={{
                        fontFamily: "sans-serif-light",

                        fontSize: 7,
                      }}
                    />
                  </View>

                  <View
                    style={{
                      marginLeft: 40,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 10,
                        fontFamily: "sans-serif-light",

                        fontStyle: "italic",
                        paddingLeft: 30,
                        paddingBottom: 5,
                        color: "#B4BFC3",
                      }}
                    >
                      Complexity
                    </Text>
                    <RadioForm
                      radio_props={complexity}
                      initial={-1}
                      formHorizontal={true}
                      labelHorizontal={false}
                      onPress={(value) => {
                        setValue(value);
                        console.log(value);
                      }}
                      buttonColor={"#33CCFF"}
                      buttonSize={10}
                      selectedButtonColor={"#33CCFF"}
                      labelStyle={{
                        fontFamily: "sans-serif-light",

                        fontSize: 7,
                      }}
                    />
                  </View>
                </View>
                <View
                  style={{
                    paddingLeft: 145,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 10,
                      fontFamily: "sans-serif-light",

                      fontStyle: "italic",
                      paddingLeft: 30,
                      color: "#B4BFC3",
                    }}
                  >
                    Pace
                  </Text>
                  <RadioForm
                    radio_props={pace}
                    initial={-1}
                    onPress={(value) => {
                      setValue(value);
                      console.log(value);
                    }}
                    buttonColor={"#33CCFF"}
                    buttonSize={10}
                    selectedButtonColor={"#33CCFF"}
                    labelStyle={{
                      fontFamily: "sans-serif-light",

                      fontSize: 7,
                    }}
                    style={{}}
                  />
                </View>
              </View>
            </View>
          </CardItem>
        </Card>
      </Content>
    </View>
  );
};

const styles = StyleSheet.create({
  viewStyle: {
    flex: 1,
    backgroundColor: "#fff",
  },
  secondView: {
    flexDirection: "row",
  },
  textTitleStyle: {
    fontFamily: "sans-serif-light",
    color: "#fff",
    paddingLeft: 80,
  },
});

NTCPDiamondScreen.navigationOptions = {
  headerTitle: () => (
    <Image
      source={require("../../assets/splash_modified.png")}
      style={{
        width: 45,
        height: 45,
        alignSelf: "center",
      }}
    />
  ),
};

export default NTCPDiamondScreen;