प्रतिक्रिया-मूल: फ़्लैटलिस्ट आइटम को कैसे लपेटें

Question

मेरे पास एक क्वेरी द्वारा लौटाई गई शर्तों की एक सूची है। प्रत्येक एक शब्द है। वर्तमान में मेरा फ़्लैटलिस्ट प्रत्येक शब्द को एक ही पंक्ति (क्षैतिज = {सत्य}) पर एक बटन में प्रस्तुत करता है मैं बटन को सामान्य पाठ की तरह लपेटना चाहता हूं। लेकिन मैं बिल्कुल कॉलम सुविधा का उपयोग नहीं करना चाहता, क्योंकि यह प्राकृतिक नहीं दिखता है। क्या यह संभवतः फ़्लैटलिस्ट के लिए एक खराब उपयोग-मामला है? क्या कोई अन्य घटक मैं उपयोग कर सकता हूं?

const styles = StyleSheet.create({ 
    flatlist: { 
    flexWrap: 'wrap' 
    }, 
    content: { 
    alignItems: 'flex-start' 
    }}) 

render() { 

    return (
     <Content> 
     <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'> 
      <Item> 
      <Icon name="ios-search" /> 
      <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter word"/> 
      <Icon name="ios-people" /> 

      <Button transparent onPress={this._executeSearch}> 
      <Text>Search</Text> 
      </Button> 
      </Item> 
     </Header> 

     <FlatList style={styles.flatlist} contentContainerStyle={styles.content} 
      horizontal={true} data={this.state.dataSource} renderItem={({item}) => 
        <Button> 
        <Text>{item.key}</Text> 
        </Button> 

       }> 
     </FlatList> 
     </Content> 

    ); 
    } 

एक त्रुटि संदेश दूसरों के बीच मैं मिल गया है है:

चेतावनी: flexWrap: wrap`` VirtualizedList components.Consider numColumns का उपयोग कर FlatList बजाय साथ साथ समर्थित नहीं है।

Answer 1

मैं कैसे घटकों लपेट कर रहा था की तरह था

flatlist: { 
    flexDirection: 'column', 
}, 

नीचे और मेरे FlatList घटक जोड़ा में यह सहारा

numColumns={3} 

Answer 2

दुर्भाग्य flexWrap FlatLists में वास्तव में असमर्थित है। इस प्रभाव को बनाने के लिए हमें FlatList के बजाय स्क्रॉलव्यू का उपयोग करने की अनुशंसा की जाती है। यह मुद्दा है: https://github.com/facebook/react-native/issues/13939