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

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

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

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,
    });
}
相关文章
相关标签/搜索