Visualizzazione modale in React Native

Question

Sono nuovo per reagire nativo, sto cercando di presentare una vista modale. Ho una vista tabella e quando viene cliccata una delle righe voglio che la vista si mostri modalmente.

Questo è come mi sono l'attuazione della transizione in questo momento:

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

Come posso modificare questo in modo che la vista può essere presentato modale?

FYI: ho già guardato domande a risposta multipla e progetti di esempio come questi:

• 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

Answer 1

Partenza il built-in Modal. È implementato su iOS, l'implementazione di Android dovrebbe arrivare in una delle prossime versioni di React Native.

La documentazione contiene un esempio su come utilizzarlo.

Nel tuo caso sarebbe qualcosa di simile:

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

Sto usando il modalbox reagire nativo. Il suo stato impressionante si arriva modali per essere visualizzati in alto, al centro, in basso, etc.Check sul link qui sotto una volta: https://github.com/maxs15/react-native-modalbox

Esempio:

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