React Native中的模态视图

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

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

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

• 如何使用react-native创建具有原生外观的模态视图segue？
• http://facebook.github.io/react-native/docs/modal.html#content
• https://github.com/aaronksaunders/React-Modal-Nav-Example

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