Как установить тени в React Native для Android?

Привет, я пытаюсь установить тень для моей фабрики, но мои попытки потерпели неудачу, пока я попытался настроить теневые реквизиты, но это для ios, поэтому я попытался сыграть с свойством elevation, но это выглядит не так.

Вот что я пробовал

<View style={{width: 56, height: 56, elevation: 2, borderRadius: 28, marginBottom: 3, backgroundColor: 'rgba(231,76,60,1)'}}></View>

Что мне нужно достичь

Ответы

Ответ 1

ОБНОВИТЬ

Добавление свойства css elevation: 1 отображает тень в Android без установки сторонней библиотеки. Смотрите другие ответы.

Один из способов получить тени для Android - это установить react-native-shadow

Пример из файла readme:

import React, {Component} from 'react' import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableHighlight } from 'react-native'

import {BoxShadow} from 'react-native-shadow'

export default class VideoCell extends Component {
    render = () => {
        const shadowOpt = {
            width:160,
            height:170,
            color:"#000",
            border:2,
            radius:3,
            opacity:0.2,
            x:0,
            y:3,
            style:{marginVertical:5}
        }

        return (
            <BoxShadow setting={shadowOpt}>
                <TouchableHighlight style={{
                    position:"relative",
                    width: 160,
                    height: 170,
                    backgroundColor: "#fff",
                    borderRadius:3,
                    // marginVertical:5,
                    overflow:"hidden"}}>
                    …………………………
                </TouchableHighlight>
            </BoxShadow>
        )
    } 
}

Ответ 2

Другое решение без использования сторонней библиотеки использует elevation.

Извлечен из документации, основанной на реакции. https://facebook.github.io/react-native/docs/view.html

(только для Android) Устанавливает высоту представления, используя Android базовый API. Это добавляет тени к элементу и влияет на z-порядок для перекрывающихся видов. Поддерживается только на Android 5.0+, не влияет на более ранние версии.

elevation войдет в свойство style и может быть реализовано так.

<View style={{ elevation: 2 }}>
    {children}
</View>

Чем выше высота, тем больше тень. Надеюсь, это поможет!

Ответ 3

Вы можете попробовать

//ios    
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
    height: 0,
    width: 0
},
//android
elevation: 1

Ответ 4

Следующее поможет вам придать каждой Platform желаемый стиль:

import { Text, View, Platform } from 'react-native';

......
<View style={styles.viewClass}></View>
......


const styles = {
viewClass: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    ...Platform.select({
        ios: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.2,
        },
        android: {
            elevation: 1

        },
      }),
}
};

Ответ 5

для экрана Android вы можете использовать это свойство elevation.

например:

 HeaderView:{
    backgroundColor:'#F8F8F8',
    justifyContent:'center',
    alignItems:'center',
    height:60,
    paddingTop:15,

    //Its for IOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,

    // its for android 
    elevation: 5,
    position:'relative',

},

Ответ 6

Я добавил borderBottomWidth: 0, и он работал нормально для меня в Android.

Ответ 7

Просто используйте свойство elevation для получения тени в android. что-то вроде ниже

const Header = () => {
    // const { textStyle, viewStyle } = styles;
    return (
      <View style={styles.viewStyle}>    
        <Text style={styles.textStyle}>Albums</Text>
      </View>
    )
}


const styles = {
    viewStyle:{
        backgroundColor:'#f8f8f8',
        justifyContext:'center',
        alignItems: 'center',
        padding:16,
        elevation: 2
    }
}

Ответ 8

Вы можете использовать мой ответ-родной-простой-теневой вид

Это позволяет практически идентичные тени в Android как в iOS
Нет необходимости использовать высоту, работает с теми же параметрами тени в iOS (shadowColor, shadowOpacity, shadowRadius, offset и т.д.), Поэтому вам не нужно писать стили тени для конкретной платформы
Может использоваться с полупрозрачными видами
Поддерживается в Android 18 и выше

Ответ 9

Я реализовал CardView для реагирования на нативные с возвышением, которые поддерживают Android (все версии) и iOS. Дайте мне знать, это поможет вам или нет. https://github.com/Kishanjvaghela/react-native-cardview

import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}>
          <Text>
              Elevation 0
          </Text>
</CardView>

Ответ 10

Короче говоря, вы не можете сделать это в Android, потому что, если вы видите документы только о тени Поддержка IOS см. Документ

Наилучший вариант, который вы можете установить, - сторонняя реакция-нативная тень.

Ответ 11

Также я хотел бы добавить, что если кто-то пытается применить тень в компоненте TouchableHighlight, у которого дочерний элемент имеет borderRadius, родительскому элементу (TouchableHighlight) также необходимо установить радиус, чтобы работа по повышению высоты работала в Android.

Ответ 12

Чтобы применить тени в Android.. эта библиотека лучше всего реагирует на родной..

реагируют родной-androw

лучшее решение для нанесения тени на андроид

Ответ 13

Возвышение по- прежнему не работает в Экспо v30 && React-native v0.55.4. Я попробовал все ответы здесь.

Кроме того, не пытайтесь реагировать на родную тень - их рендеринг теней ужасен. Итак, я продолжаю исследование.

Ответ 14

Установите elevation: 3 и вы должны увидеть тень внизу компонента без сторонней библиотеки. По крайней мере, в 0,57,4 руб.

Ответ 15

У меня была та же проблема тени/высоты не отображается на Android с возвышением: 2. Затем я заметил, что элемент view имеет ширину дурака, поэтому я добавил margin: 2 к элементу view, и высота появилась правильно.

Стиль:

    margin: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2

Android:

iOS:

Ответ 16

Генерация теней для круга, реагирование родных, андроид

Основываясь на ответах, приведенных здесь, и на тексте, который я нашел в github (Reaction-native-shadow), я провел несколько тестов и подумал, что некоторые люди могут найти следующее полезным.

Тесты на круглой кнопке
Среда: ПК с Windows 10, собственная реакция с использованием реактивной собственной тени (которая плохо работает для круга) и параметр повышения собственной реакции (https://facebook.github.io/react-native/docs/view-style-props # elevation) с разными значениями, работает на эмуляторе Android (genymotion)

Вот как выглядит экран:

Код:

import React, { Component } from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { BoxShadow } from 'react-native-shadow'

export default class ShadowsTest extends Component {

  render() {
    const shadowOpt = {
      width: 100,
      height: 100,
      color: "#000",
      border: 2,
      radius: 50,
      opacity: 0.8,
      x: 3,
      y: 3,
      //style: { marginVertical: 5 }
    }

    return (
      <View style={{ flex: 1 }}>
        <Header
          text={"Shadows Test"} />

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
            <TouchableHighlight style={{
              position: 'relative',
              width: 100,
              height: 100,
              backgroundColor: "#fff",
              borderRadius: 50,
              borderWidth: 0.8,
              borderColor: '#000',
              // marginVertical:5,
              alignItems: 'center',
              justifyContent: 'center',
              overflow: "hidden" }}>
              <Text style={{ textAlign: 'center' }}>
                0: plain border
              </Text>
            </TouchableHighlight>
          </View>

          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
            <BoxShadow setting={ shadowOpt }>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden" }}>
                <Text style={{ textAlign: 'center' }}>
                  1: RN shadow package
                </Text>
              </TouchableHighlight>
            </BoxShadow>
          </View>
        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                shadowOffset: { width: 15, height: 15 },
                shadowColor: "black",
                shadowOpacity: 0.9,
                shadowRadius: 10,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  2: vanilla RN: shadow (may work on iOS)
                </Text>
              </TouchableHighlight>
          </View>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                elevation: 15,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  3: vanilla RN: elevation only (15)
                </Text>
              </TouchableHighlight>
          </View>
        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center', marginBottom: 30 }}>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                elevation: 5,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  4: vanilla RN: elevation only (5)
                </Text>
              </TouchableHighlight>
          </View>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                elevation: 50,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  5: vanilla RN: elevation only (50)
                </Text>
              </TouchableHighlight>
          </View>
        </View>
      </View>
    )
  }
}

Ответ 17

По некоторым причинам это сработало только для меня, добавив borderColor: 'transparent' (или любой другой цвет). Мой стиль вывода выглядит так:

{
        borderColor: "transparent", // Required to show shadows on Android for some reason !?!?
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 0.3,
        shadowRadius: 5,

        elevation: 15,
      }

Ответ 18

Свойство стиля elevation в Android не работает, если для элемента не было указано backgroundColor.

Android - свойство стиля высот не работает без backgroundColor

Пример:

{
  shadowColor: 'black',
  shadowOpacity: 0.26,
  shadowOffset: { width: 0, height: 2},
  shadowRadius: 10,
  elevation: 3,
  backgroundColor: 'white'
}