web-dev-qa-db-ja.com

React Nativeで<FlatList />の高さを変更するにはどうすればよいですか？

_<FlatList />_の幅と高さを変更したい。

heightスタイルを現在の_<FlatList />_に設定しましたが、うまくいきませんでした。

_<FlatList />_の高さを変更することはできません。

これは私のrender()関数とスタイルです。

_    render() {
        const listData = [];
        listData.Push({ key: 0 });
        listData.Push({ key: 1 });
        listData.Push({ key: 2 });
        listData.Push({ key: 3 });
        listData.Push({ key: 4 });
        return (
            <View style={styles.container}>
                <FlatList
                    data={listData}
                    renderItem={({item}) => {
                        return (
                            <View
                                style={{
                                    width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
                                }}
                            />
                        )
                    }}
                    horizontal
                    style={styles.flatList}
                />
            </View>
        );
    }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    flatList: {
        height: 50,
        backgroundColor: 'red'
    }
});
_

そして、これはこのコードの結果です。

Current result

数時間答えを見つけましたが、何も助けになりませんでした。

なぜ高さスタイルが機能しないのかわかりません。

どんな助けも大歓迎です。

react-nativereact-native-flatlist
15
blackdeve

答えを見つけました。

<View/>の高さを設定し、その中に<FlatList/>を配置しました<View/>

問題を解決しました。 :)

56
blackdeve

FlatListには、prop contentContainerStyleがあります。これを使用して、FlatListのラッパーをスタイルできます。 FlatListはScrollViewからこのプロップを継承します read listen

1
Viktor Hardubej

flexGrow: 0をflatListスタイルに追加するとうまくいきました。

flatList: {
  height: 50,
  backgroundColor: 'red',
  flexGrow: 0
}
0
Mr.Jerry.