在可觸摸的高光部分添加組分

Question

我想在TouchableHighlight上以導入組件的方式在react-native中添加導出組件。

var MessageBox = require('./GiftedMessengerContainer'); 

var MyAppName = React.createClass({ 

_openGiftedMessanger(){ 
    return (<MessageBox style={styles.container}/>); 
    }, 

    render: function() { 
     return (
      <View style={styles.container}> 
      <TouchableHighlight 
       style={styles.imButton} 
       onPress={this._openGiftedMessanger}> 
       <Text>Open Chat Room</Text> 
      </TouchableHighlight> 
      } 
      </View> 
     ); 
    } 

AppRegistry.registerComponent('MyAppName',() => AppName); 

而我的模塊，

import React, { 
    Linking, 
    Platform, 
    ActionSheetIOS, 
    Dimensions, 
    View, 
    Text, 
    //Navigator, 
    Component, 
} from 'react-native'; 

var GiftedMessenger = require('react-native-gifted-messenger'); 
var Communications = require('react-native-communications'); 


// var STATUS_BAR_HEIGHT = Navigator.NavigationBar.Styles.General.StatusBarHeight; 
// if (Platform.OS === 'android') { 
// var ExtraDimensions = require('react-native-extra-dimensions-android'); 
// var STATUS_BAR_HEIGHT = ExtraDimensions.get('STATUS_BAR_HEIGHT'); 
// } 


class GiftedMessengerContainer extends Component { 

    constructor(props) { 
    super(props); 

    this._isMounted = false; 
    this._messages = this.getInitialMessages(); 

    this.state = { 
     messages: this._messages, 
     isLoadingEarlierMessages: false, 
     typingMessage: '', 
     allLoaded: false, 
    }; 

    } 

    componentDidMount() { 
    this._isMounted = true;  

    setTimeout(() => { 
     this.setState({ 
     typingMessage: 'React-Bot is typing a message...', 
     }); 
    }, 1000); // simulating network 

    setTimeout(() => { 
     this.setState({ 
     typingMessage: '', 
     }); 
    }, 3000); // simulating network 


    setTimeout(() => { 
     this.handleReceive({ 
     text: 'Hello Awesome Developer', 
     name: 'React-Bot', 
     image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, 
     position: 'left', 
     date: new Date(), 
     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation 
     }); 
    }, 3300); // simulating network 
    } 

    componentWillUnmount() { 
    this._isMounted = false; 
    } 

    getInitialMessages() { 
    return [ 
     { 
     text: 'Are you building a chat app?', 
     name: 'React-Bot', 
     image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, 
     position: 'left', 
     date: new Date(2016, 3, 14, 13, 0), 
     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation 
     }, 
     { 
     text: "Yes, and I use Gifted Messenger!", 
     name: 'Awesome Developer', 
     image: null, 
     position: 'right', 
     date: new Date(2016, 3, 14, 13, 1), 
     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation 
     }, 
    ]; 
    } 

    setMessageStatus(uniqueId, status) { 
    let messages = []; 
    let found = false; 

    for (let i = 0; i < this._messages.length; i++) { 
     if (this._messages[i].uniqueId === uniqueId) { 
     let clone = Object.assign({}, this._messages[i]); 
     clone.status = status; 
     messages.push(clone); 
     found = true; 
     } else { 
     messages.push(this._messages[i]); 
     } 
    } 

    if (found === true) { 
     this.setMessages(messages); 
    } 
    } 

    setMessages(messages) { 
    this._messages = messages; 

    // append the message 
    this.setState({ 
     messages: messages, 
    }); 
    } 

    handleSend(message = {}) { 

    // Your logic here 
    // Send message.text to your server 

    message.uniqueId = Math.round(Math.random() * 10000); // simulating server-side unique id generation 
    this.setMessages(this._messages.concat(message)); 

    // mark the sent message as Seen 
    setTimeout(() => { 
     this.setMessageStatus(message.uniqueId, 'Seen'); // here you can replace 'Seen' by any string you want 
    }, 1000); 

    // if you couldn't send the message to your server : 
    // this.setMessageStatus(message.uniqueId, 'ErrorButton'); 
    } 

    onLoadEarlierMessages() { 

    // display a loader until you retrieve the messages from your server 
    this.setState({ 
     isLoadingEarlierMessages: true, 
    }); 

    // Your logic here 
    // Eg: Retrieve old messages from your server 

    // IMPORTANT 
    // Oldest messages have to be at the begining of the array 
    var earlierMessages = [ 
     { 
     text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. https://github.com/facebook/react-native', 
     name: 'React-Bot', 
     image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, 
     position: 'left', 
     date: new Date(2016, 0, 1, 20, 0), 
     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation 
     }, { 
     text: 'This is a touchable phone number 0606060606 parsed by taskrabbit/react-native-parsed-text', 
     name: 'Awesome Developer', 
     image: null, 
     position: 'right', 
     date: new Date(2016, 0, 2, 12, 0), 
     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation 
     }, 
    ]; 

    setTimeout(() => { 
     this.setMessages(earlierMessages.concat(this._messages)); // prepend the earlier messages to your list 
     this.setState({ 
     isLoadingEarlierMessages: false, // hide the loader 
     allLoaded: true, // hide the `Load earlier messages` button 
     }); 
    }, 1000); // simulating network 

    } 

    handleReceive(message = {}) { 
    // make sure that your message contains : 
    // text, name, image, position: 'left', date, uniqueId 
    this.setMessages(this._messages.concat(message)); 
    } 

    onErrorButtonPress(message = {}) { 
    // Your logic here 
    // re-send the failed message 

    // remove the status 
    this.setMessageStatus(message.uniqueId, ''); 
    } 

    // will be triggered when the Image of a row is touched 
    onImagePress(message = {}) { 
    // Your logic here 
    // Eg: Navigate to the user profile 
    } 

    render() { 
    return (
     <GiftedMessenger 
     ref={(c) => this._GiftedMessenger = c} 

     styles={{ 
      bubbleRight: { 
      marginLeft: 70, 
      backgroundColor: '#007aff', 
      }, 
     }} 

     autoFocus={false} 
     messages={this.state.messages} 
     handleSend={this.handleSend.bind(this)} 
     onErrorButtonPress={this.onErrorButtonPress.bind(this)} 
     maxHeight={Dimensions.get('window').height} //- Navigator.NavigationBar.Styles.General.NavBarHeight - STATUS_BAR_HEIGHT} 

     loadEarlierMessagesButton={!this.state.allLoaded} 
     onLoadEarlierMessages={this.onLoadEarlierMessages.bind(this)} 

     senderName='Awesome Developer' 
     senderImage={null} 
     onImagePress={this.onImagePress} 
     displayNames={true} 

     parseText={true} // enable handlePhonePress, handleUrlPress and handleEmailPress 
     handlePhonePress={this.handlePhonePress} 
     handleUrlPress={this.handleUrlPress} 
     handleEmailPress={this.handleEmailPress} 

     isLoadingEarlierMessages={this.state.isLoadingEarlierMessages} 

     typingMessage={this.state.typingMessage} 
     /> 
    ); 
    } 

    handleUrlPress(url) { 
    Linking.openURL(url); 
    } 

    // TODO 
    // make this compatible with Android 
    handlePhonePress(phone) { 
    if (Platform.OS !== 'android') { 
     var BUTTONS = [ 
     'Text message', 
     'Call', 
     'Cancel', 
     ]; 
     var CANCEL_INDEX = 2; 

     ActionSheetIOS.showActionSheetWithOptions({ 
     options: BUTTONS, 
     cancelButtonIndex: CANCEL_INDEX 
     }, 
     (buttonIndex) => { 
     switch (buttonIndex) { 
      case 0: 
      Communications.phonecall(phone, true); 
      break; 
      case 1: 
      Communications.text(phone); 
      break; 
     } 
     }); 
    } 
    } 

    handleEmailPress(email) { 
    Communications.email(email, null, null, null, null); 
    } 

} 


module.exports = GiftedMessengerContainer; 

如何我的屏幕上添加自定義的看法？

Answer 1

你需要使用一些稱爲狀態的東西（在React中）。當onPress函數被調用時，你設置一個狀態變量來打開/關閉，然後可以用來顯示/隱藏自定義視圖。例如：

var MessageBox = require('./GiftedMessengerContainer'); 

var MyAppName = React.createClass({ 
    getInitialState: function(){ 
    return { 
     messageBoxShow: 'false' 
    } 
    }, 

_openGiftedMessanger:function(){ 
    this.setState({ 
     messageBoxShow: 'true' 
    }); 
    }, 

    render: function() { 
     return (
      <View style={styles.container}> 
      <TouchableHighlight 
       style={styles.imButton} 
       onPress={this._openGiftedMessanger}> 
       <Text>Open Chat Room</Text> 
      </TouchableHighlight> 
      {this.state.messageBoxShow === 'true' ? <MessageBox style={styles.container}/> : null }; 
      </View> 
     ); 
    } 

AppRegistry.registerComponent('MyAppName',() => AppName);