与成长中的孩子反应本机滚动视图

Posted 2023-02-24

【中文标题】与成长中的孩子反应本机滚动视图

【英文标题】：React Native ScrollView With growing child

【发布时间】：2016-05-09 16:41:49

【问题描述】：

我正在实现一个撰写屏幕：具有附加图像能力的不断增长的输入文本。当输入文本的高度增加（例如屏幕的一半）时，即使它的 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);

【问题讨论】：

尝试将 flex:1 属性添加到 attachScrollView @coyote

它不会改变任何东西

【参考方案1】：

这是因为您的 Image 有一个absolute 位置。只需删除绝对定位表单imageattach 即可。