lớp phủ trong suốt trong Phản ứng Native

Question

Tôi đang cố gắng để có được một lớp phủ trong suốt trượt xuống trong một ứng dụng, khá nhiều như thế này đây (tất cả/lọc-by):

Cho đến nay tôi thấy phản ứng -native-slider và phản ứng-native-overlay. Tôi đã sửa đổi thanh trượt để làm việc từ trên xuống dưới, nhưng nó luôn luôn di chuyển xuống ListView. Nếu sử dụng lớp phủ phản ứng gốc, lớp phủ là tĩnh và tôi không thể di chuyển nó.

Tôi đã thêm một số mã trình diễn từ hướng dẫn gốc phản ứng gốc in this gist. Khi nhấp vào nút, nội dung sẽ được dán và menu sẽ che phủ. Sự minh bạch không phải là quan trọng ngay bây giờ nhưng sẽ là tuyệt vời.

Giải pháp thông minh nhất là gì?

Answer 1

Chìa khóa để ListView của bạn không di chuyển xuống, là đặt vị trí của lớp phủ thành absolute. Bằng cách đó, bạn có thể đặt vị trí và chiều rộng/chiều cao của chế độ xem theo cách thủ công và nó không theo bố cục flexbox nữa. Hãy xem ví dụ ngắn sau đây. Chiều cao của lớp phủ được cố định thành 360, nhưng bạn có thể dễ dàng tạo hiệu ứng này hoặc làm cho nó động.

'use strict'; 

var React = require('react-native'); 
var Dimensions = require('Dimensions'); 

// We can use this to make the overlay fill the entire width 
var { width, height } = Dimensions.get('window'); 

var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to the React Native Playground! 
     </Text> 
     <View style={[styles.overlay, { height: 360}]} /> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    // Flex to fill, position absolute, 
    // Fixed left/top, and the width set to the window width 
    overlay: { 
    flex: 1, 
    position: 'absolute', 
    left: 0, 
    top: 0, 
    opacity: 0.5, 
    backgroundColor: 'black', 
    width: width 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

module.exports = SampleApp; 

Answer 2

import React, { Component } from 'react'; 
import { Image, StyleSheet, View } from 'react-native'; 

export default class App extends Component { 
    render() { 
    return (
     <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage}> 
     <View style={s.overlay}/> 
     </Image> 
    ); 
    } 
} 

const s = StyleSheet.create({ 
    backgroundImage: { 
     flex: 1, 
     width: null, 
     height: null, 
    }, 
    overlay: { 
    position: 'absolute', 
    top: 0, 
    right: 0, 
    bottom: 0, 
    left: 0, 
    backgroundColor: 'red', 
    opacity: 0.3 
    } 
}); 

Live Demo: https://sketch.expo.io/S15Lt3vjg

Nguồn repo: https://github.com/Dorian/sketch-reactive-native-apps

Answer 3

cách thông minh nhất ??

cách thông minh nhất đối với tôi là sử dụng modals từ phản ứng bản địa để xây dựng một tùy biến cao đáp ứng kinh nghiệm, bạn có thể dễ dàng thiết lập các hướng chuyển động của các phương thức, thiết lập tính minh bạch, chuyển đổi tầm nhìn etc etc, cá nhân tôi chưa bao giờ sử dụng các mô đun npm hiện có để triển khai ngăn kéo bên hoặc thanh điều hướng, tôi thực hiện việc này bằng Modals.
Nếu bạn muốn tôi có thể cung cấp cho một đoạn mã mẫu mà nhận ra một ngăn kéo chuyển hướng sử dụng modals