Question

在我的应用程序中我无法滚动我的视图。我有我的文本和按钮底部的屏幕，但我不能滚动我的视图。本地的反应是不会给出任何默认的滚动效果？

    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>

React Native View Wont Scroll

1 个答案: