React Native 中的模态视图答案

【问题标题】：Modal View in React NativeReact Native 中的模态视图
【发布时间】：2015-09-17 13:58:01
【问题描述】：

我是原生反应新手，我正在尝试以模态方式呈现视图。我有一个表格视图，当单击其中一行时，我希望视图以模态方式显示。

这就是我现在实施过渡的方式：

renderbooks(books) {
     return (
          <TouchableHighlight onPress={() => this.showbooksDetail(books)}  underlayColor='#dddddd'>
              <View>
                  <View style={styles.container}>

                      <View style={styles.rightContainer}>
                          <Text style={styles.title}>{books.title}</Text>



                          </View>
                  </View>
                  <View style={styles.separator} />
              </View>
          </TouchableHighlight>
     );
 }
 showbooksDetail(books){
   this.props.navigator.push({
     title:books.title,
     component: ProductView,
     passProps:{books}
   });
 }

如何修改它以便可以模态显示视图？

仅供参考：我已经查看了多个问题和示例项目，例如：

【问题讨论】：

标签： react-native

【解决方案1】：

查看内置的Modal。它在 iOS 上实现，Android 实现应该在 React Native 的下一个版本中实现。

文档包含如何使用它的示例。

在你的情况下，它会是这样的：

renderBooks(books) {
   ...
   <Modal
      animated={true}
      transparent={true}
      visible={!!this.state.selectedBook}>
      <Text>{this.state.selectedBook.title}</Text>
   </Modal>

   ...
}

showDetail(book) {
    this.setState({
        selectedBook: book,
    });
}

【讨论】：

【解决方案2】：

查看这个简单而强大的小型库 react-native-modal-animated，只需通过 yarn add react-native-modal-animated 或 npm install react-native-modal-animated 安装即可。

import { AnimatedModal } from 'react-native-modal-animated
      <View style={styles.container}>

        <TouchableOpacity
          onPress={() => {
            this.setState({ modalVisible: true });
            alert
          }}
          style={styles.button}
        >
          <Text style={styles.buttonText}>Show Modal</Text>
        </TouchableOpacity>


        <AnimatedModal
          visible={this.state.modalVisible}
          onBackdropPress={() => {
            this.setState({ modalVisible: false });
          }}
          animationType="vertical"
          duration={600}
        >
          {/*Any child can be used here */}
          <View style={styles.modalCard}>
            <Text>I'm AnimatedModal</Text>
            <Text style={{fontWeight: 'bold', marginTop: 10}}>vertical</Text>
          </View>
        </AnimatedModal>
      </View>
    );
  }
}

【讨论】：

【解决方案3】：

我正在使用 react-native 模态框。让模态显示在顶部、中心、底部等位置真是太棒了。检查以下链接一次：https://github.com/maxs15/react-native-modalbox

示例：

    import React from 'react';
    import Modal from 'react-native-modalbox';
    import Button from 'react-native-button';

    import {
      AppRegistry,
      Text,
      StyleSheet,
      ScrollView,
      View,
      Dimensions
    } from 'react-native';

    class Example extends React.Component {

      constructor() {
        super();
        this.state = {
          isOpen: false,
          isDisabled: false,
          swipeToClose: true,
          sliderValue: 0.3
        };
      }

      onClose() {
        console.log('Modal just closed');
      }

      onOpen() {
        console.log('Modal just openned');
      }

      onClosingState(state) {
        console.log('the open/close of the swipeToClose just changed');
      }

    render() {    
        return (
          <View style={styles.wrapper}>
            <Button onPress={() => this.refs.modal1.open()} style={styles.btn}>Basic modal</Button>
            <Button onPress={() => this.refs.modal2.open()} style={styles.btn}>Position top</Button>
            <Button onPress={() => this.refs.modal3.open()} style={styles.btn}>Position centered + backdrop + disable</Button>
            <Button onPress={() => this.refs.modal4.open()} style={styles.btn}>Position bottom + backdrop + slider</Button>

        <Modal
              style={[styles.modal, styles.modal1]}
              ref={"modal1"}
              swipeToClose={this.state.swipeToClose}
              onClosed={this.onClose}
              onOpened={this.onOpen}
              onClosingState={this.onClosingState}>
                <Text style={styles.text}>Basic modal</Text>
                <Button onPress={() => this.setState({swipeToClose: !this.state.swipeToClose})} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
            </Modal>
        <Modal style={[styles.modal, styles.modal2]} backdrop={false}  position={"top"} ref={"modal2"}>
                  <Text style={[styles.text, {color: "white"}]}>Modal on top</Text>
                </Modal>

                <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
                  <Text style={styles.text}>Modal centered</Text>
                  <Button onPress={() => this.setState({isDisabled: !this.state.isDisabled})} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
                </Modal>

                <Modal style={[styles.modal, styles.modal4]} position={"bottom"} ref={"modal4"}>
                  <Text style={styles.text}>Modal on bottom with backdrop</Text>

        </Modal>
      </View>
        );
      }

    }
    const styles = StyleSheet.create({
      modal: {
        justifyContent: 'center',
        alignItems: 'center'
      },

      modal2: {
        height: 230,
        backgroundColor: "#3B5998"
      },

      modal3: {
        height: 300,
        width: 300
      },

      modal4: {
        height: 300
      },

      wrapper: {
          paddingTop: 50,
    flex: 1
  },

});

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

【讨论】：