react native-我在一个js文件中有一个ListView组件，我想用它作为另一个.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;

创建消息.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，它运行良好，但我想在单击按钮时显示/隐藏列表（3rd TochableHighlight）。

Answer 1

我假设_renderList负责呈现您的listview组件。您可以在渲染函数中调用它。

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