React native 如何在React Native中制作三重轮廓边框

有人能告诉我如何在React Native中进行这种三边设计吗？

---

换行3个不同的视图以获得不同的边框

import React, { Component } from "react";
import { StyleSheet, Text, View, SafeAreaView } from "react-native";

export default class Example extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{ borderWidth: 1, borderRadius: 5, borderColor: 'red', width: "90%" }}>
          <View style={{ borderWidth: 1, borderRadius: 10, borderColor: 'green', width: "100%" }}>
            <View style={{ borderWidth: 1, borderRadius: 15, borderColor: 'blue', width: "100%" }}>
              <Text style={{alignSelf: 'center'}}>Search</Text>
            </View>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100,
    justifyContent: "center",
    alignItems: "center"
  }
});

这不是最佳解决方案。根据需要更改此选项

---

希望这对你有帮助。请放心。

尝试使用三重嵌套视图，如果trickI还有其他问题，我会发短信给你