Question

我正在实现一个撰写屏幕：一个不断增长的输入文本，能够附加图像。当输入文本在高度上增长时（例如，它占据屏幕的一半），即使scrollSize的contentSize大于它的帧，scrollView也不会滚动。我怎么能让它滚动？

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
  TouchableHighlight,
  ScrollView,
  Dimensions
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';


var {width, height} = Dimensions.get('window');
class AutoExpandingTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: '', height: 0};
  }
  render() {
    return (
      <TextInput
      {...this.props}
      multiline={true}
      onChange={(event) => {
        this.setState({
          text: event.nativeEvent.text,
          height: event.nativeEvent.contentSize.height,
        });
      }}
      style={[styles.default, {height: Math.max(35, this.state.height)},this.props.style]}
      value={this.state.text}
      />
    );
  }
}
class MultilineTextInput extends Component {
  constructor(props){
    super(props);
    this.state = {
      renderImage : true,
      attachedImage:null
    }
    this.onContentSizeChange = this.onContentSizeChange.bind(this);
  }
  onContentSizeChange(a,b){
    console.log("content size changed")
    console.log(a)
    console.log(b)
  }
  renderInputWithImage(){
    return(
      <View style={styles.container}>
         <View style={styles.toolbar}>
           <Text style={styles.toolbarButton}>Cancel</Text>
           <Text style={styles.toolbarTitle}>SHARE SOMETHING</Text>
           <Text style={styles.toolbarButton}>Post</Text>
        </View>
        <View style={styles.content}>
          <ScrollView style={styles.attachScrollView} onContentSizeChange={this.onContentSizeChange}>
            <View style={styles.scrollViewChild}>
              <AutoExpandingTextInput
                  placeholder="Write here"
                  enablesReturnKeyAutomatically={true}
                  returnKeyType="done"
                  style={styles.textInput}/>
                  <View style={styles.imageattachHolder}>
                    <Image source = {require('./img/att.jpg')}
                           style={styles.imageattach}
                           resizeMode = {'cover'}/>
                    <TouchableHighlight>
                      <Icon name="close" size={25} color="#eaf0f6" style={styles.closeButton}/>
                    </TouchableHighlight>
                  </View>
            </View>
          </ScrollView>
          <View style={styles.buttomToolBar}>
            <TouchableHighlight>
              <Icon name="picture-o" color="#eaf0f6" size={25}></Icon>
            </TouchableHighlight>
            <TouchableHighlight>
              <Icon name="map-marker" color="#eaf0f6" size={25}></Icon>
            </TouchableHighlight>
          </View>
        </View>
      </View>
    );
  }
  renderInputOnly(){
    return (
      <View style={styles.container}>
        <AutoExpandingTextInput
          placeholder="Share something"
          enablesReturnKeyAutomatically={true}
          returnKeyType="done"
          top={20}
        />
      </View>
    );
  }
  render() {
    if(this.state.renderImage){
      console.log(width)
      return this.renderInputWithImage()
    }else{
      return this.renderInputOnly()
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#ebeef0'
  },
  attachScrollView:{
    backgroundColor:'green'
  },
  imageattach:{
    //width: width,
    position:'absolute',
    height:402,
    left:0,
    right:0,
    top:0
  },
  toolbar:{
        backgroundColor:'#fff',
        paddingTop:30,
        paddingBottom:10,
        flexDirection:'row'
    },
    buttomToolBar:{
      backgroundColor:'#fff',
      flexDirection:'row',
      padding:5,
      backgroundColor:'red'
    },
    toolbarButton:{
        width: 50,
        color:'#000',
        textAlign:'center'
    },
    toolbarTitle:{
        color:'#000',
        textAlign:'center',
        fontWeight:'bold',
        flex:1
    },
    content:{
        backgroundColor:'#fff',
        flex:1,
        marginTop:5
    },
    textInput:{
       left:10,
       color:"#2C3E50",
       fontSize:15,
       textAlign : 'left',
       marginTop:5
    },
    imageattachHolder:{
      alignItems:'flex-start',
      flex:1
    },
    closeButton:{
      backgroundColor : 'rgba(0,0,0,0)'
    }
});

AppRegistry.registerComponent('MultilineTextInput', () => MultilineTextInput);

Answer 1

这是因为您的图片位置absolute。只需删除绝对定位表单imageattach，您就可以了。

React Native ScrollView随着成长中的孩子

1 个答案: