两组件合并第二个组件为列表,第二个组件不能滚动



  • import React, { Component } from 'react'
    import PropTypes from 'prop-types';
    import {StyleSheet, Text, View,TextInput,TouchableHighlight} from 'react-native';
    export default class CommentInput extends Component {
      static propTypes = {
        username: PropTypes.any,
        onSubmit: PropTypes.func,
        onUserNameInputBlur: PropTypes.func
      }
      static defaultProps = {
        username: ''
      }
      constructor (props) {
        super(props)
        this.state = {
          username: props.username,
          content: ''
        }
      }
      handleSubmit () {
        if (this.props.onSubmit) {
          this.props.onSubmit({
            username: this.state.username,
            content: this.state.content,
            createdTime: +new Date()
          })
        }
        this.setState({ content: '' })
      }
    
      render () {
        return (
          <View style = {styles.container}>
            <View style = {styles.searchContainer}>
                 <View style = {styles.btn}>
                    <Text style = {styles.search}>用户名</Text>
                 </View>
                 <View style = {styles.inputContainer}>
                     <TextInput style = {styles.input}
                         value={this.state.username}
                         onChangeText={(username)=>this.setState({username})}
                     />
                  </View>
            </View>
            <View style = {styles.searchContainer}>
                <View style = {styles.btn}>
                    <Text style = {styles.search}>评论内容</Text>
                </View>
                <View style = {styles.inputContainer}>
                    <TextInput
                        style={{height: 80, borderColor: 'gray', borderWidth: 1}}
                        onChangeText={(content) => this.setState({content})}
                        placeholder = {'请输入评论内容'}
                        multiline = {true}
                        numberOfLines = {5}
                        placeholderTextColor = {'red'}
                        value={this.state.content}
                    />
                </View>
            </View>
            <View style= {styles.buttonContainer}>
                <TouchableHighlight underlayColor="#dedede" style={styles.button} onPress = {this.handleSubmit.bind(this)}>
                    <Text style={{color:'#ffffff',fontSize:16}}>发布</Text>
                </TouchableHighlight>
            </View>
          </View>
        )
      }
    }
    const styles = StyleSheet.create({
       container: {
          flexDirection:"column",
    //      backgroundColor:'red'
       },
       searchContainer:{
          flexDirection:"row",
          justifyContent:"flex-end",
          alignItems:"center",
          paddingRight:10,
          marginTop:18
      },
      inputContainer:{
          flex: 1,
          marginLeft:5,
      },
      input:{
          flex:1,
          height:44,
          borderWidth:1,
          borderRadius:4,
          borderColor:"#ccc",
          paddingLeft:5
      },
      btn:{
          width:70,
          height:44,
          marginLeft:5,
          marginRight:5,
          borderRadius:4,
          justifyContent:"center",
          alignItems:"center"
      },
      search:{
          flex:1,
          fontSize:15,
          fontWeight:"bold",
          textAlign:"center",
          lineHeight:44
      },
      buttonContainer: {
        padding:10,
        alignItems:"flex-end"
      },
      button: {
        borderRadius: 20,
        backgroundColor:"rgba(36,139,197,0.8)",
        borderBottomColor: '#f1f1f1',
        borderBottomWidth: 1,
        width:100,
        height:40,
        alignItems:"center",
        justifyContent:"center"
      },
    });
    
    import React, { Component } from 'react'
    import PropTypes from 'prop-types';
    import CommentInput from './CommentInput'
    import {Platform,View,Text,ScrollView,Dimensions,StyleSheet,FlatList} from 'react-native';
    import Comment from './Comment'
    
    export default class CommentList extends Component {
      static propTypes = {
        comments: PropTypes.array,
        onDeleteComment: PropTypes.func
      }
    
      static defaultProps = {
        comments: []
      }
    
      constructor (props) {
          super(props)
          this.state = {
            comments:[{"username":"1","content":"1","createdTime":1547110360884},{"username":"1","content":"2","createdTime":1547110363979},{"username":"1","content":"3","createdTime":1547110365757},{"username":"1","content":"4","createdTime":1547110367814},{"username":"1","content":"5","createdTime":1547110368746},{"username":"1","content":"6","createdTime":1547110369834},{"username":"1","content":"7","createdTime":1547110370752},{"username":"1","content":"8","createdTime":1547110371945},{"username":"1","content":"9","createdTime":1547110373194},{"username":"1","content":"10","createdTime":1547110374952},{"username":"1","content":"11","createdTime":1547110376466},{"username":"1","content":"12","createdTime":1547110377927},{"username":"1","content":"13","createdTime":1547110379366},{"username":"1","content":"14","createdTime":1547110380869},{"username":"1","content":"15","createdTime":1547110382182}]
          }
    //      console.log(this.props.comments)
        }
      handleDeleteComment (index) {
        if (this.props.onDeleteComment) {
          this.props.onDeleteComment(index)
        }
      }
      _keyExtractor = (item, index) => index
      render() {
    //    console.log(JSON.stringify(this.props.comments));
        return (
    //        <ScrollView scrollEnable={false} style = {{backgroundColor:'#fddd03'}}>
                <View>
                    <FlatList
                      keyExtractor={this._keyExtractor}
    //                  data={this.props.comments}
                      data = {this.state.comments}
                      renderItem={({item}) => <Comment
                                              comment={item}
                                              index={item.index}
                                              onDeleteComment={this.handleDeleteComment.bind(this)} />}
                    />
                </View>
    //        </ScrollView>
        )
      }
    }
    var styles = StyleSheet.create({
    
    });
    

    [链接文本](链接地址)



  • 两个组件合并的代码可否提供一下?



  • import React, {Component} from 'react';
    import {StyleSheet,View} from 'react-native';
    import CommentInput from './src/CommentInput'
    import CommentList from './src/CommentList'

    export default class App extends Component {
    render() {
    return (
    <View>
    <CommentInput/>
    <CommentList />
    </View>
    );
    }
    }
    const styles = StyleSheet.create({

    });



  • @mirghojam import React, {Component} from 'react';
    import {StyleSheet,View} from 'react-native';
    import CommentInput from './src/CommentInput'
    import CommentList from './src/CommentList'

    export default class App extends Component {
    render() {
    return (
    <View>
    <CommentInput/>
    <CommentList />
    </View>
    );
    }
    }
    const styles = StyleSheet.create({

    });



  • 0_1547198931892_35eeef19-cddf-425a-9f71-7962c1202c16-image.png