प्रतिक्रियात्मक मूल में मॉडेल व्यू

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

मैं कैसे है जिससे कि दृश्य रीति से प्रस्तुत किया जा सकता इस संशोधित कर सकते हैं?

FYI करें: मैं पहले से ही इस तरह के कई सवाल और नमूना परियोजनाओं पर ध्यान दिया है:

• 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

चेक बाहर निर्मित Modal। यह आईओएस पर लागू किया गया है, एंड्रॉइड कार्यान्वयन प्रतिक्रिया मूल के अगले रिलीज में से एक में आना चाहिए।

प्रलेखन में इसका उपयोग करने के तरीके पर एक उदाहरण शामिल है।

आपके मामले में यह कुछ इस तरह होगा:

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

मैं प्रतिक्रिया देशी modalbox उपयोग कर रहा हूँ। इसके गया भयानक आप क्रियार्थ द्योतक शीर्ष, केंद्र, नीचे, etc.Check नीचे दिए गए लिंक एक बार में प्रदर्शित करने के लिए मिलता है: https://github.com/maxs15/react-native-modalbox

नमूना:

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