ListViewコンポーネントがjsファイルにあり、別のjsファイルを使用して、ボタンをクリックしてコンポーネントを表示/非表示にしたい

Question

どうすればよいですか？私のコードは次のとおりです。

ListComponent.js

 import React, { Component } from 'react'; 
     import { 
      AppRegistry, 
      StyleSheet, 
      Text, 
      View, 
      ListView, 
      TouchableHighlight 
     } from 'react-native'; 

     class ListComponent extends Component { 
      constructor(props) { 
      super(props); 
      var dataSource = new ListView.DataSource(
       {rowHasChanged: (r1, r2) => r1!== r2}); 
      this.state = { 
       dataSource: dataSource.cloneWithRows(['A','B','C']) 
      }; 
      } 
      renderRow(rowData, sectionID, rowID) { 
      return (
       <TouchableHighlight 
       <View> 
        <Text style={styles.instructions}>{rowData}</Text> 
       </View> 
       </TouchableHighlight> 
      ); 
      } 

      render() { 
      return (
       <ListView 
       dataSource={this.state.dataSource} 
       renderRow={this.renderRow.bind(this)}/> 
      ); 
      } 
     } 
     module.exports=ListComponent; 

CreateMessage.js

 'use strict' 
     var React= require('react'); 
     var ReactNative = require('react-native'); 
     var { 
      View, 
      Text, 
      Image, 
      StyleSheet, 
      TouchableHighlight, 
      TextInput, 
      Dimensions, 

     }= ReactNative; 

     import { Container, Content, Picker } from 'native-base'; 

     var ListComp=require('./ListComponent'); 

     class CreateMessage extends React.Component{ 

      constructor(props) { 
       super(props); 
       this.state = { email: 'Email ID' , pass:'Password',   name:'Name', isLoginClicked:'true',language:'ABC',pickerState:false}; 
     } 
      press(){  
       this.setState({ 
        pickerState : !this.state.pickerState 
        }); 
       } 

_renderList() { 
if (this.state.pickerState) { 
return (
    <ListComp/> 
    ); 
} 
    else { 
     return null; 
     } 
} 

render(){ 

return (
    <View> 
    <View> 
    <View> 
     <TouchableHighlight 
     style={{flex:1}}> 
     <Image 
     style={styles.headerImage} 
     source={require('./images/back-arrow.png')}/> 
     </TouchableHighlight> 

     <Text> Create Message</Text> 
    </View> 
    <View> 
    <TouchableHighlight> 
    <Text>Done</Text> 
    </TouchableHighlight> 
    </View> 
    </View> 
     <View> 
     <Text>Post to</Text> 

     <View> 
      <View> 
        <Image 
        style={{height:70,width:70,}} 
        source={require('./images/no-image.png')}/> 
        </View> 

        <View> 
        <Text 
        style={styles.text}>name of community</Text> 
        <Text 
        style={styles.text1}>no. of members</Text> 
        </View> 
**<TouchableHighlight 

        underlayColor="gray" 

        onPress={this.press.bind(this)}> 
        <Image 
        style={{height:20,width:20,}} 
        source={require('./images/add-button.png')}/> 

        </TouchableHighlight>** 
    </View> 
    <Text 
        style={styles.headingText}>Subject</Text> 

        <TextInput></TextInput> 

        <Text 
        style={styles.headingText}>Message</Text> 

        <TextInput></TextInput> 
    <View> 


     <TouchableHighlight}> 
     <View> 
     <Image 
     style={{height:20,width:20,marginLeft:0,}} 
     source={require('./images/image-add-button.png')}/> 

        <Text>Add Photo</Text> 
        </View> 
        </TouchableHighlight> 
        <Text>ADD PROJECT</Text> 
        </View> 
        </View> 
        </View> 
     ); 
} 
} 
module.exports=CreateMessage; 

私は私のindex.ios.jsファイルにCreateMessage.jsを表示していますし、それが正常に動作している、しかし、私ボタンのクリックでリストを表示/非表示したい（3番目のTochableHighlight）

Answer 1

_renderListは、あなたのリストビューコンポーネントのレンダリングを担当します。レンダリング機能で呼び出すことができます。

render(){ 
return (
    <View> 
    {this._renderList()} 
    /*......rest of your code....*/ 
    </View> 
);