Reactor Native ScrollView Mit wachsendem Kind

Question

Ich bin ein Compose-Bildschirm implementieren: Eine wachsende Eingabe Text mit der Fähigkeit, ein Bild anzuhängen. Wenn der Eingabetext in der Höhe anwächst (er nimmt beispielsweise die Hälfte des Bildschirms ein), scrollt die scrollView nicht, selbst wenn die contentSize größer ist als der Frame. wie kann ich es scrollen lassen?

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

Dies ist, weil Sie Bild absolute Position hat. Entfernen Sie einfach das absolute Positionierungsformular imageattach und schon können Sie loslegen.