React Native ScrollView无法正常工作

时间:2017-08-03 08:47:05

标签: reactjs react-native scrollview native nestedscrollview

我正在开发一份调查表。总而言之,我想在可滚动页面中使用ScrollView。 问题来自json及其类型(如类型:' list' /' check' / radio /' autocomplete')和我的高阶有序组件获取和放置问到手机屏幕。 HOC就是这样:

import {Container, ... } from 'native-base'
    <Container>
    .
    .
    .
         <Content key="form" style={Style.content}>
            {questions}
         </Content>
    .
    .
    .
    </Container>

如果问题超过6或7,手机屏幕可以滚动(我认为这个可滚动功能来自&#39; Container&#39;组件)。  在我的自动完成组件中,我想使用ScrollView获取textInput下面的建议。自动填充组件如下所示:

       <View>
        .
        .
        .
        <TextInput
                    style={Style.ACTextInput}
                    ref={ref => this.textInputRef = ref as FocusableTextInput}
                    multiline={true}
                    onChangeText={(text) => {
                        this.setState({ filter: text })
                        this.filterOptions(text)
                    }
                    }
                    value={this.state.filter} >
                </TextInput>
            </View>

            {/* TODO: Need to use nested scroll view. */}
            <Content style={{ height: 250 }}>
                {/* <ScrollView style={Style.suggestionContainer}
                    scrollEnabled={true} > */}
                {this.state.showOptions.map(this.drawSuggestions)}
                {/* </ScrollView> */}
            </Content>
       .
       .
       .
  </View>

如果手机屏幕不可滚动,则自动填充建议部分滚动正常。但是,如果手机屏幕是可滚动的(如果我在页面中有超过6-7个问题)自动完成部分失去其可滚动功能并且手机屏幕开始滚动..我写了2个不同的部分工作,因为我认为这个问题可能发生其中一个。我还搜索在react-native中使用NestedScrollView,我发现这是Android设备的常见问题。这有什么解决方案吗? 感谢

注意:我的测试手机是三星S6 android 7.0

0 个答案:

没有答案