Фон с двумя цветами - React Native

Question

Есть ли способ получить фон с двумя цветами следующим образом: Два цвета Я попробовал выставить Linear Gradient, но это Градиент. Я не уверен, как поставить два цвета в основной тег просмотра в качестве фона? Есть предложения?

Answer 1

Если размеры представления никуда вас не ведут, попробуйте манипулировать его границами, например, попробуйте следующий код:

import React, { Component } from 'react'
import { View, Dimensions } from 'react-native'

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

class App extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View
                    width: SCREEN_WIDTH,
                    height: 0,
                    borderTopColor: "blue",
                    borderTopWidth: SCREEN_HEIGHT / 2,
                    borderRightWidth: SCREEN_WIDTH,
                    borderRightColor: 'transparent'
                />
            </View>
        )
    }
}

export default App

И это дает вам:

Не по теме

Я до сих пор не понимаю, почему людям не нравятся такие вопросы. Да, код не опубликован, но это не значит, что он ничего не пробовал. Может быть, он и сделал, но ни один из методов, которые он пробовал, не был близок к ответу, тогда зачем ему размещать код здесь, чтобы сделать вопрос длинным, просто чтобы доказать, что он пытался? И, даже если он не очень старался, возможно, это потому, что он понятия не имел, что попробовать, не правда ли?

Есть много вопросов без какого-либо кода, который был опубликован, но получил сотни откликов, таких как «Как удалить элемент из массива в JavaScript?». В самом деле? Я искренне думаю, что если бы вы даже прочитали документацию и попробовали некоторые методы, такие как .splice, .reduce, .unshift, вы бы поняли это, не спрашивая об этом здесь на SO. Эти вопросы были популярны, потому что они облегчили жизнь многим начинающим (включая меня), а не потому, что эти вопросы показали, что тот, кто их задал, приложил немало усилий. И этот вопрос, безусловно, хороший в этом смысле. (Но, возможно, ему следует изменить название вопроса, чтобы сделать его более конкретным, потому что другим было бы полезно, если бы они его обманули)

Answer 2

Это можно сделать с помощью границ.

div{
    background: green;
    width: 25px;
    height: 30px;
    border-color: red;
    border-top: 20px solid red; /* Determines how far from the bottom the black triangle should be */
    border-right: 25px solid green; /* Determines how far from the right the black triangle should be */
    box-sizing: border-box;
    position: relative;
}

div:after {
    content: "";
    background: green;
    width: 5px; /* How far from the right the black triangle is */
    height: 30px;
    position: absolute;
    top: -20px; /* Determines how far from the bottom the black triangle should be */
    left: 25px; /* Determines how far from the right the black triangle should be */
}

<div></div>

Или вы можете использовать градиент с очень резким срезом.

    background: linear-gradient(315deg, rgba(0,0,0,0) 60%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 50%,rgba(0, 0, 0, 1) 50%);