ネイティブフラットリストに反応する

Question

<FlatList 
     data={['1', '2', '3', '4', '5', '6', '7', '8']} 
     numColumns={4} 
     renderItem={({ item }) => (
     <Button title={item} /> 
    )} 
    /> 

同じ行の4つのボタンが画面幅全体を占めるようにボタンのサイズを変更するにはどうすればよいですか？ width: "25%"またはflex: 1は動作しません。あなたはそれらのスタイルは幅適用どこ

Answer 1

私は知りません：「25％」またはフレックス：1を、あなたは直接反応し、ネイティブのドキュメントによるとButtonコンポーネントにスタイルを提供カントので。したがって、ボタンコンポーネントを表示してそのビューにスタイルを適用する必要があります。

あなたの場合両方の幅：'25％ 'とフレックス：1作品、以下はコードです。

import React, { Component } from 'react'; 
import { View, StyleSheet,FlatList,Button } from 'react-native'; 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <FlatList 
     data={['1', '2', '3', '4', '5', '6', '7', '8']} 
     numColumns={4} 
     renderItem={({ item }) => (
     <View style={{flex:1,height:100}} > 
     <Button title={item} /> 
     </View> 
    )} 
    /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#ecf0f1', 
    }, 
}); 

スナックデモ - https://snack.expo.io/SkidXdPDZ