React Native Modal với minh bạch sử dụng Navigator mà không sử dụng phương thức

Question

Tài liệu gốc phản ứng cho biết các ứng dụng RN nên sử dụng Navigator để tạo Modals (https://facebook.github.io/react-native/docs/modal.html#content).

Làm cách nào để tạo một phương thức minh bạch bằng Navigator, mà không sử dụng phương thức? Tôi muốn người dùng thấy trang hiện tại trong nền. Cảm ơn bạn.

Answer 1

Để trả lời câu hỏi của bạn về phương thức minh bạch, bạn có thể sử dụng màu nền rgba, ví dụ: rgba (0, 0, 0, 0.5) và chuyển alpha đến đối số cuối cùng của màu: rgba (r , g, b, alpha).

Theo như điều hướng có liên quan, bạn có thể sử dụng đối số Navigator.SceneConfigs.FloatFromBottom cho trình điều hướng để tạo phương thức, đặt Bộ điều hướng phương thức trong cảnh của một Điều hướng khác. Có một chuỗi tốt với các ví dụ cho rằng here. Một cái gì đó như:

this.props.navigator.push({ 
    title: 'title', 
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom, 
    component: component, 
    navigationBar: <NavigationBar 
     title="Initial View"/>, 
    passProps: {} 
}) 

Tôi đã tạo một dự án mẫu có nền trong suốt here và đặt mã bên dưới. Tôi hi vọng cái này giúp được!

https://rnplay.org/apps/pHqjhQ

'use strict'; 

var React = require('react-native'); 
var { 
    Modal, 
    StyleSheet, 
    SwitchIOS, 
    Text, 
    TouchableHighlight, 
    View, 
    AppRegistry, 
} = React; 

exports.displayName = (undefined: ?string); 
exports.framework = 'React'; 
exports.title = '<Modal>'; 
exports.description = 'Component for presenting modal views.'; 

var Button = React.createClass({ 
    getInitialState() { 
    return { 
     active: false, 
    }; 
    }, 

    _onHighlight() { 
    this.setState({active: true}); 
    }, 

    _onUnhighlight() { 
    this.setState({active: false}); 
    }, 

    render() { 
    var colorStyle = { 
     color: this.state.active ? '#fff' : '#000', 
    }; 
    return (
     <TouchableHighlight 
     onHideUnderlay={this._onUnhighlight} 
     onPress={this.props.onPress} 
     onShowUnderlay={this._onHighlight} 
     style={[styles.button, this.props.style]} 
     underlayColor="#a9d9d4"> 
      <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text> 
     </TouchableHighlight> 
    ); 
    } 
}); 

var ModalExample = React.createClass({ 
    getInitialState() { 
    return { 
     animated: true, 
     modalVisible: false, 
     transparent: true, 
    }; 
    }, 

    _setModalVisible(visible) { 
    this.setState({modalVisible: visible}); 
    }, 

    render() { 
    var modalBackgroundStyle = { 
     backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff', 
    }; 

    return (
     <View> 
     <Modal 
      animated={this.state.animated} 
      transparent={this.state.transparent} 
      visible={this.state.modalVisible}> 
      <View style={[styles.container, modalBackgroundStyle]}> 
      <View style={[styles.innerContainer]}> 
       <Button 
       onPress={this._setModalVisible.bind(this, false)} 
       style={styles.modalButton}> 
       Close 
       </Button> 
      </View> 
      </View> 
     </Modal> 
     <View style={{ marginTop:60 }}> 
      <Button onPress={this._setModalVisible.bind(this, true)}> 
      SHOW MODAL 
      </Button>        
     </View> 
     </View> 
    ); 
    }, 
}); 

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

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    padding: 20, 
    }, 
    innerContainer: { 
    borderRadius: 10, 
    alignItems: 'center', 
    }, 
    button: { 
    borderRadius: 5, 
    flex: 1, 
    height: 44, 
    alignSelf: 'stretch', 
    justifyContent: 'center', 
    overflow: 'hidden', 
    }, 
    buttonText: { 
    fontSize: 18, 
    margin: 5, 
    textAlign: 'center', 
    }, 
    modalButton: { 
    marginTop: 10, 
    }, 
}); 

Answer 2

Để trả lời câu hỏi được cập nhật, tất cả các bạn cần làm là thay đổi configureScene của bạn để một cái gì đó như thế này:

configureScene(route, routeStack){ 
    if(route.type == 'Modal') { 
    return Navigator.SceneConfigs.FloatFromBottom 
    } 
    return Navigator.SceneConfigs.PushFromRight 
} 

Sau đó, vượt qua kiểu 'phương thức' khi muốn một phương thức:

_navigate(name, type='Normal') { 
    this.props.navigator.push({ 
    component: Home, 
    passProps: { 
     name: name 
    }, 
    type: type 
    }) 
} 

Có một ví dụ được thiết lập here.

https://rnplay.org/apps/ALL-Sw

Answer 3

Trong khi điều này không áp dụng cho trường hợp của bạn như tôi đã sử dụng một Modal, tôi chỉ muốn thông báo cho làm thế nào tôi đạt được một minh bạch nền với điều đó:

• trong render của bạn phương thức mà bạn đang hiển thị Modal, vượt qua một proptransparent={true}
• thêm một đơn View con vào số modal của bạn (đặt tất cả những thứ khác trong số này View) và áp dụng style cho nó với backgroundColor = 'rgba(r, g, b, a)'. Dưới đây a đề cập đến alpha hoặc mức opacity mà bạn muốn trong nền

React-Native v0.46.4

---

Xem các liên kết:

react-native-router-flux issue #749

react-native issue #2386