Question

我在scrollView内有FlatList，但是在应用程序屏幕中滚动时无法滚动平面列表。我正在谷歌搜索，但没有找到解决此问题的适当方法。你能帮我吗，我不知道怎么了...

我的代码：

<ScrollView>
       <FlatList
                                     ref={(list) => this.myList = list}
                                    style={styles.flatList}
                                    data={this.state.data}
                                    scrollEnabled = {true}
                                    //showsVerticalScrollIndicator={false}
                                    contentContainerStyle={{ padding: 15 }}
                                    renderItem={({ item }) => (

                                          <View style={styles.listItemStyle}>
                                            <View style={{flexDirection: 'row', marginBottom: 7, }}>

                                                {
                                                    item.checked && 
                                                    <TouchableOpacity
                                                        onPress={this.changeCheckedToFalse.bind(this,item)}>
                                                        <View style={styles.checked} /> 
                                                    </TouchableOpacity> || 
                                                    <TouchableOpacity
                                                        onPress={this.changeCheckedToTrue.bind(this,item)}>
                                                        <View style={styles.unchecked} />
                                                    </TouchableOpacity>
                                                }


                                                <Text>{item.key}</Text>
                                                {
                                                    item.checked &&
                                                    <View style={{position: 'absolute', right: 0 }}>
                                                        <View style={{flexDirection: 'row'}} >
                                                            <TouchableOpacity 
                                                                style={[styles.touchable1,styles.iconStyle1]} >

                                                                <Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>O</Text>
                                                            </TouchableOpacity>


                                                            <TouchableOpacity 
                                                                style={[styles.touchable2,styles.iconStyle1]} >
                                                                <Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>N</Text>
                                                            </TouchableOpacity>
                                                        </View>
                                                    </View>
                                                }
                                            </View>

                                            <View style={styles.line} />
                                          </View>



                                    )}
                                    keyExtractor={item => item.key}
                                />

</ScrollView>

Answer 1

尝试使用Container而不是ScrollView。在下面的代码中，两个滚动均有效。

import React, { Component } from 'react';
import { View, Image, Text, FlatList, StyleSheet, Dimensions } from 'react-native';
import { Container, Content } from 'native-base'

const dimensions = Dimensions.get('window');
const viewHeight = Math.round(dimensions.width * 9 / 16);
const viewWidth = dimensions.width;

class App extends Component {
    constructor(props)
    {
        super(props);

        this.state = { FlatListItems: [
                {key: 'One'},
                {key: 'Two'},
                {key: 'Three'},
                {key: 'Four'},
                {key: 'Five'},
                {key: 'Six'},
                {key: 'Seven'},
                {key: 'Eight'},
                {key: 'Nine'},
                {key: 'Ten'},
                {key: 'Eleven'},
                {key: 'Twelve'}
            ]}
    }

    FlatListItemSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: "100%",
                    backgroundColor: "#607D8B",
                }}
            />
        );
    }

    GetItem (item) {
        Alert.alert(item);
    }

    render() {
        return (
            <Container>
                <Content>
                    <View style={{
                        height: 150
                    }}>
                        <FlatList

                            data={ this.state.FlatListItems }

                            ItemSeparatorComponent = {this.FlatListItemSeparator}

                            renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
                        />
                    </View>


                    <Text style={{fontSize:96}}>Scroll me plz</Text>
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Text style={{fontSize:96}}>If you like</Text>
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                    <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                </Content>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

});

export default App;

FlatList滚动在ScrollView中不起作用

1 个答案: