Widok modalny w React Native

Question

Jestem nowy, aby reagować na natywny, staram się przedstawić pogląd modalnie. Mam widok tabeli i po kliknięciu jednego z wierszy chcę, aby widok pokazywał się modalnie.

To jak mam realizacji przejścia teraz:

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

Jak można zmodyfikować tak, że ten widok może być przedstawiony modally?

FYI: I już spojrzał na liczne pytania i przykładowych projektów, takich jak te:

• 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

Zapoznaj się z wbudowaną Modal. Jest zaimplementowany na iOS, implementacja Androida powinna pochodzić z jednej z kolejnych wersji React Native.

Dokumentacja zawiera przykład, jak z niego korzystać.

W twoim przypadku to byłoby coś takiego:

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

Używam reagować natywną modalbox. Jej były niesamowite masz czasowniki modalne mają być wyświetlane na górze, środku, u dołu, etc.Check link poniżej kiedyś: https://github.com/maxs15/react-native-modalbox

Próbka:

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