ネイティブScrollViewに反して子どもが成長すると

Question

私は構成画面を実装しています。入力テキストの高さが高くなると（たとえば画面の半分を占める）、scrollViewはcontentSizeがフレームより大きくてもスクロールしません。どうすればスクロールできますか？

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を削除するだけでよいでしょう。