React Native View Wont Scroll

Question

私のアプリでは私のview.iをスクロールすることはできません。私のテキストとボタンは画面のボトムを持っていますが、私はview.isをスクロールできません。ネイティブはデフォルトのスクロール効果を与えません。

render() { 
     if(this.viewCaseData === true){ 
     var caseList = <View > 
      <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}></ListView> 

     </View> 
}else{ 
     var caseList = <ScrollView ref='scrollView' contentContainerStyle={{flex:1}} style={{ 
      marginLeft: 10, 
      marginRight: 10, 
      flex:1 
     }}> 
     <View> 
      <View style={{ 
       marginBottom: 10, 
       flexDirection: 'column' 
      }}> 
       <View> 

       <TextField 
       label={'Search'} 
       highlightColor={'#DA4336'} 
       duration={10} 
       labelColor={'black'} 
       borderColor = {'#DA4336'} 
       onChangeText={(text) => this.setState({searchText: text})} 
       value = {this.state.searchText} 
       dense={true} 
       /> 
       </View> 
       <View > 
        <TouchableOpacity 
        onPress={this.loadCustomerData.bind(this)} 
        style={{ 
         marginLeft: 320, 
         height: 30, 
         width: 30, 
         backgroundColor: '#DA4336' 
        }}> 
         <Text style={{ 
          color: '#fff' 
         }}>Search</Text> 
        </TouchableOpacity> 
       </View> 
      </View> 

      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Customer Category</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 
      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Customer Category Type</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Customer Code Type</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Customer Code</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>BranchLocation</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Title</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Full Name</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Initials</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Lastname</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Preferred Name</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>DateOf Birth</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Gender</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Mother Maiden Name</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Nationality</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Religon</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Marital Status</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Preferred Language</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Mobile01</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Mobile02</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 

      <View style={styles.seperator}/> 
      <View style={styles.textMainView}> 
       <Text style={styles.textLabel}>Email</Text> 
       <Text style={styles.textDetail}>value</Text> 
      </View> 
      </View> 
     </ScrollView> 
     } 

     return (
      <View style={{flex:1}}> 
       <View style={styles.headerView}> 

        <View > 
         <View style={styles.circle}> 
          <Text style={{ 
           fontSize: 40, 
           fontWeight: 'bold', 
           color: '#fff', 
           marginLeft: 18 
          }}>A</Text> 
         </View> 

         <Text style={{ 
          fontSize: 18, 
          color: '#fff', 
          marginLeft: 15, 
          marginTop: 5, 
          marginBottom: 20 
         }}>User Name</Text> 
        </View> 

        <View style={styles.headerButtonMain}> 
         <View style={styles.headerButton}> 
           <TouchableOpacity style={{ 
            marginRight: 25 
           }} 
           onPress={this.loadListData.bind(this)} 
           > 
            <Image style={styles.button} source={require('./img/imgCase.png')}/> 
           </TouchableOpacity> 

           <TouchableOpacity style={{ 
            marginRight: 25 
           }} 
           onPress={this.openCaseView.bind(this)} 
           > 
            <Image style={styles.button} source={require('./img/imgCall.png')}/> 
           </TouchableOpacity> 
           <TouchableOpacity style={{ 
            marginRight: 25 
           }} 
           //onPress={this._onPressButton} 
           > 
            <Image style={styles.button} source={require('./img/imgCase.png')}/> 
           </TouchableOpacity> 
         </View> 
         <Text style={{ 
          fontSize: 18, 
          color: '#fff', 
          marginLeft: 15, 
          marginTop: 38, 
          marginBottom: 20 
         }}>My Cases</Text> 
        </View> 

       </View> 
       <View> 


{caseList} 
       </View> 
       <View> 
        <ColoredFab> 
         <Image pointerEvents="none" source={require('./img/plus_white.png')}/> 
        </ColoredFab> 
       </View> 
      </View> 

     ); 

Answer 1

私のメインビューとしてScrollViewを追加

var _scrollView: ScrollView; 

<ScrollView 
      ref={(scrollView) => { _scrollView = scrollView; }} 
      automaticallyAdjustContentInsets={false} 
      onScroll={() => { console.log('onScroll!'); }} 
      scrollEventThrottle={200} 
      style={{height: 300}}> 
..... 

</ScrollView>