Как сделать тройной контур границы в React Native - PullRequest
Новая
       3

Как сделать тройной контур границы в React Native

0 голосов
/ 18 января 2020

Может кто-нибудь сказать мне, как сделать такой дизайн тройной границы в React Native? enter image description here

1 Ответ

1 голос
/ 18 января 2020

Оберните 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"
  }
});

Это не будет оптимальным решением. Измените это кодирование на требование.

Надеюсь, это вам поможет. Не стесняйтесь сомнений.

...