Question

这是我使用的视图样式

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
}

目前它有白色背景。我可以像我想要的'#343434'一样更改backgroundColor，但它只接受最大6个十六进制颜色，所以我不能像'#00ffffff'那样给出不透明度。我试过像这样使用不透明度

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  opacity: 0.5,
}

但会降低观看内容的可见度。那么有什么答案吗？

Answer 1

使用`rgba`的{{1}}值。

例如，

backgroundColor

这会将其设置为灰色，具有80％的不透明度，该颜色来自不透明度十进制backgroundColor: 'rgba(52, 52, 52, 0.8)'。此值可以是0.8到0.0。

Answer 2

以下工作正常：

backgroundColor: 'rgba(52, 52, 52, alpha)'

您也可以尝试：

backgroundColor: 'transparent'

Answer 3

试试这个backgroundColor: '#00000000' 它会将背景颜色设置为透明，它遵循#rrggbbaa十六进制代码

Answer 4

尽量使用透明属性值来制作透明背景色。

backgroundColor: 'transparent'

Answer 5

您应该意识到iOS和RGBA背景当前存在的冲突。

摘要：公共React Native当前会暴露iOS层阴影   属性或多或少直接存在，但是有许多   问题：

1）默认情况下，使用这些属性时的性能较差。那是   因为iOS会通过获取确切的像素蒙版来计算阴影   该视图，包括任何半透明的内容及其所有子视图，   这非常占用CPU和GPU。 2）iOS的shadow属性   与CSS框阴影标准的语法或语义不匹配，并且   不太可能在Android上实现。 3）我们不   公开layer.shadowPath属性，这对于获取   层阴影效果好。

此差异通过实现默认值解决了问题1）   shadowPath与不透明视图的视图边框匹配   背景。通过优化以提高阴影的性能   常用情况。我还恢复了背景色   传播具有阴影道具的视图-这应该有所帮助   确保这种最佳情况经常发生。

对于具有明确透明背景的视图，阴影将   继续像以前一样工作（shadowPath将保持不变，   阴影将完全从视图的像素派生，   其子视图）。这是性能的最坏情况，但是，   因此，除非绝对必要，否则应避免使用它。 对此的支持   可能会在将来默认情况下被禁用，或者完全删除。

对于半透明图像，建议将阴影烘烤到   图像本身，或使用其他机制预先生成阴影。   对于文本阴影，应使用textShadow属性，该属性可以   跨平台并具有更好的性能。

问题2）将在以后的比较中解决，可能是   将iOS shadowXXX属性重命名为boxShadowXXX，并进行更改   符合CSS标准的语法和语义。

问题3）现在几乎没有意义，因为我们生成了shadowPath   自动。将来，我们可能会提供iOS专用的道具来设置   如果需要更精确地控制   阴影。

评论者：weicool

提交：https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06

Answer 6

令人惊讶的是，没有人告诉您这一点，它提供了一些明确性：

background-color: white;
opacity: 0.7;

Answer 7

添加 React-Native 0.64 版参考

命名颜色

Named Colors: DOCS

<块引用>

在 React Native 中，您还可以使用颜色名称字符串作为值。注意：React Native 只支持小写颜色名称。不支持大写颜色名称。透明的＃这是 rgba(0,0,0,0) 的快捷方式，与 CSS3 中相同。

因此你可以这样做：

background: {
    backgroundColor: 'transparent'        
},

这是 :

的快捷方式

background: {
        backgroundColor: 'rgba(0,0,0,0)'            
    },

Answer 8

这是我对可以在任何屏幕上呈现并在App.tsx中初始化的模式的解决方案

ModalComponent.tsx

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, StyleSheet, Platform } from 'react-native';
import EventEmitter from 'events';
// I keep localization files for strings and device metrics like height and width which are used for styling 
import strings from '../../config/strings';
import metrics from '../../config/metrics';

const emitter = new EventEmitter();
export const _modalEmitter = emitter

export class ModalView extends Component {
    state: {
        modalVisible: boolean,
        text: string, 
        callbackSubmit: any, 
        callbackCancel: any,
        animation: any
    }

    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            text: "", 
            callbackSubmit: (() => {}), 
            callbackCancel: (() => {}),
            animation: new Animated.Value(0)
        } 
    }

    componentDidMount() {
        _modalEmitter.addListener(strings.modalOpen, (event) => {
            var state = {
                modalVisible: true,
                text: event.text, 
                callbackSubmit: event.onSubmit, 
                callbackCancel: event.onClose,
                animation: new Animated.Value(0)
            } 
            this.setState(state)
        })
        _modalEmitter.addListener(strings.modalClose, (event) => {
            var state = {
                modalVisible: false,
                text: "", 
                callbackSubmit: (() => {}), 
                callbackCancel: (() => {}),
                animation: new Animated.Value(0)
            } 
            this.setState(state)
        })
    }

    componentWillUnmount() {
        var state = {
            modalVisible: false,
            text: "", 
            callbackSubmit: (() => {}), 
            callbackCancel: (() => {})
        } 
        this.setState(state)
    }

    closeModal = () => {
        _modalEmitter.emit(strings.modalClose)
    }

    startAnimation=()=>{
        Animated.timing(this.state.animation, {
            toValue : 0.5,
            duration : 500
        }).start()
    }

    body = () => {
        const animatedOpacity ={
            opacity : this.state.animation
        }
        this.startAnimation()
        return (
            <View style={{ height: 0 }}>
                <Modal
                    animationType="fade"
                    transparent={true}
                    visible={this.state.modalVisible}>

                    // render a transparent gray background over the whole screen and animate it to fade in, touchable opacity to close modal on click out

                    <Animated.View style={[styles.modalBackground, animatedOpacity]} > 
                        <TouchableOpacity onPress={() => this.closeModal()} activeOpacity={1} style={[styles.modalBackground, {opacity: 1} ]} > 
                        </TouchableOpacity>
                    </Animated.View>

                    // render an absolutely positioned modal component over that background
                    <View style={styles.modalContent}>

                        <View key="text_container">
                            <Text>{this.state.text}?</Text>
                        </View>
                        <View key="options_container">
                            // keep in mind the content styling is very minimal for this example, you can put in your own component here or style and make it behave as you wish
                            <TouchableOpacity
                                onPress={() => {
                                    this.state.callbackSubmit();
                                }}>
                                <Text>Confirm</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                onPress={() => {
                                    this.state.callbackCancel();
                                }}>
                                <Text>Cancel</Text>
                            </TouchableOpacity>

                        </View>
                    </View>
                </Modal>
            </View> 
        );
    }

    render() {
        return this.body()
    }
}

// to center the modal on your screen 
// top: metrics.DEVICE_HEIGHT/2 positions the top of the modal at the center of your screen
// however you wanna consider your modal's height and subtract half of that so that the 
// center of the modal is centered not the top, additionally for 'ios' taking into consideration
// the 20px top bunny ears offset hence - (Platform.OS == 'ios'? 120 : 100)
// where 100 is half of the modal's height of 200
const styles = StyleSheet.create({
    modalBackground: {
        height: '100%', 
        width: '100%', 
        backgroundColor: 'gray', 
        zIndex: -1 
    },
    modalContent: { 
        position: 'absolute', 
        alignSelf: 'center', 
        zIndex: 1, 
        top: metrics.DEVICE_HEIGHT/2 - (Platform.OS == 'ios'? 120 : 100), 
        justifyContent: 'center', 
        alignItems: 'center', 
        display: 'flex', 
        height: 200, 
        width: '80%', 
        borderRadius: 27,
        backgroundColor: 'white', 
        opacity: 1 
    },
})

App.tsx呈现和导入

import { ModalView } from './{your_path}/ModalComponent';

render() {
    return (
        <React.Fragment>
            <StatusBar barStyle={'dark-content'} />
            <AppRouter />
            <ModalView />
        </React.Fragment>
    )
}

并从任何组件中使用它

SomeComponent.tsx

import { _modalEmitter } from './{your_path}/ModalComponent'

// Some functions within your component

showModal(modalText, callbackOnSubmit, callbackOnClose) {
    _modalEmitter.emit(strings.modalOpen, { text: modalText, onSubmit: callbackOnSubmit.bind(this), onClose: callbackOnClose.bind(this) })
}

closeModal() {
    _modalEmitter.emit(strings.modalClose)
}

希望我能为你们中的一些人提供帮助，我在应用内通知中使用了非常相似的结构

快乐编码

如何在React Native

8 个答案:

使用`rgba`的{{1}}值。

命名颜色

如何在React Native

8 个答案:

使用rgba的{​​{1}}值。

命名颜色

使用`rgba`的{{1}}值。