react-native – React Native中的模态视图

发布时间：2020-12-15 20:45:18 所属栏目：百科来源：网络整理

导读：我是新来的反应原生,我试图以模态呈现一个视图.我有一个表视图,当单击其中一行时,我希望视图以模态方式显示. 这就是我现在实现转换的方式： renderbooks(books) { return ( TouchableHighlight onPress={() = this.showbooksDetail(books)} underlayColor='#

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

这就是我现在实现转换的方式：

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

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

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

> How do I create a native looking modal view segue with react-native?
> http://facebook.github.io/react-native/docs/modal.html#content
> https://github.com/aaronksaunders/React-Modal-Nav-Example

查看内置的 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,});
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!