Phản ứng gốc: cách bọc các mặt hàng FlatList

Question

Tôi có một danh sách các Điều khoản được trả về bởi một truy vấn. Mỗi từ là một từ duy nhất. Hiện tại, FlatList của tôi hiển thị từng từ trong một nút trên cùng một hàng (ngang = {true}) Tôi muốn các nút được bọc như văn bản bình thường. Nhưng tôi hoàn toàn không muốn sử dụng tính năng cột, bởi vì điều đó sẽ không giống như tự nhiên. Đây có phải là trường hợp sử dụng xấu cho FlatList không? Có bất kỳ thành phần nào khác mà tôi có thể sử dụng không?

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> 

    ); 
    } 

Một thông báo lỗi giữa những người khác tôi đã nhận được là:

Cảnh báo: flexWrap: wrap`` không được hỗ trợ với VirtualizedList components.Consider sử dụng numColumns với FlatList để thay thế.

Answer 1

Làm thế nào tôi đã có thể quấn thành phần là như dưới đây

flatlist: { 
    flexDirection: 'column', 
}, 

và trong thành phần FlatList tôi thêm này đạo cụ

numColumns={3} 

Answer 2

Thật không may flexWrap là thực sự không được hỗ trợ trong FlatLists. Chúng tôi khuyên bạn nên sử dụng ScrollView thay vì FlatList để tạo hiệu ứng này. Đây là vấn đề: https://github.com/facebook/react-native/issues/13939