Question

我是新来的本地反应，我试图以模态方式呈现视图。我有一个表视图，当单击其中一行时，我希望视图以模态显示。

这就是我现在正在实施转型的方式：

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}
   });
 }

如何修改此视图以便以模态方式呈现视图？

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

Answer 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,
    });
}

Answer 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>
    );
  }
}

Answer 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);

React Native中的模态视图

3 个答案: