Question

如何在列布局中水平弯曲？目前只有屏幕宽度的一半

这是当前的渲染代码：

render() {
    const {handle_data} = this.state
    if (handle_data.length) {
      return (
        <ScrollView style={styles.container}>
          {
            handle_data.map(pack => {
              console.log('this.cleanDataForFlatlist(pack): ', this.cleanDataForFlatlist(pack))
              return (
                <View style={styles.pack}>
                  <Text style={{fontWeight: 'bold'},{fontSize: 24}}>{pack[0].pack_name}</Text>
                  <Text style={{fontWeight: 'bold'},{fontSize: 16}}>{pack[0].pack_description}</Text>
                  <View style={styles.pack}>
                    <FlatList
                      data={this.cleanDataForFlatlist(pack)}
                      keyExtractor={this._keyExtractor}
                      renderItem={this._renderHandle}
                    />
                  </View>
                </View>
              )
            })
          }
        </ScrollView>
      );
    } else {
      return null
    }

  }

Here's what it looks like now

Answer 1

我没有看到您关于某件商品的代码，因此我展示了一个示例代码。您的问题主要是项目渲染。

 // the soruceData is the data souce,in other words, your handle_data
<View style={{flex:1, backgroundColor:'transparent'}} >
            <FlatList
            data={this.state.sourceData}
            renderItem={this._renderItem}
            />
</View>

//the render item method, I suggest you put the item into a pure component
 _renderItem = ({ item }) => {
    return (
        <View style={{flexDirection:'column',width:'92%'}>
            id={item.id} // the every item should hava a unique id or key
            <ImageView source={{uri:"image url"}} style={{width:,height:}}/>
            <Text numberOfLines={1} style={{fontSize: 18,
             color: '#353535',}}>"content"</Text>
        />
    );
  };

您设置的布局宽度或高度应使用flex或percent。在这种情况下，您的用户界面就很灵活。

同时，我建议您阅读felx layout guide

最后，我建议您删除滚动视图，将平顶上方的视图移动到flatList ListHeaderComponent中。它可以避免滚动冲突。

如何在列布局中水平弯曲？目前只有屏幕宽度的一半

1 个答案: