React native 如何在列布局中水平伸缩？目前只有屏幕宽度的一半

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

以下是当前渲染代码：

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
    }

  }

render（）{
const{handle_data}=this.state
if（句柄数据长度）{
返回(
{
handle_data.map（pack=>{
console.log（'this.cleanDataForFlatlist（pack）：'，this.cleanDataForFlatlist（pack））
返回(
{pack[0]。pack_name}
{pack[0]。pack_description}
)
})
}
);
}否则{
返回空
}
}

---

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

 // 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>
        />
    );
  };

//soruceData是数据源，换句话说，就是您的句柄\u数据
//在render item方法中，我建议您将该项放入纯组件中
_renderItem=（{item}）=>{
返回(
id={item.id}//每个项都应该有一个唯一的id或键
“内容”
/>
);
};

设置布局宽度或高度时，应使用flex或percent。在这种情况下，您的UI是灵活的

同时，我建议你阅读

---

最后，我建议您删除滚动视图，将位于平面列表上方的视图移动到平面列表列表标题组件中。它可以避免滚动冲突。

您可以显示渲染代码吗？@Lenoarod补充道，感谢您查看它！顺便说一句，它让我删除了样式代码，但我将把它扔到这里：const styles=StyleSheet.create（{container:{flex:1，backgroundColor:'#f2f2f2'，}，pack:{padding:10，backgroundColor:'grey'，margintical:5，display:'flex'，alignItems:'stretch}，句柄：{display:'flex'，flexDirection:'column'，flexWrap:'wrap'，alignItems:'stretch'，justifyContent:'flex start'}此外，我实际上正在尝试（最终）显示两个“句柄”每行，如果这是你也有专业知识的话。看看如何做到每行1个，每行2个，可能会很有用，这样我就可以看到更好的效果。这方面没有压力帮助，但是：）我发布了一个答案，你可以试试这是我关于一个项目的呈现，如果这有帮助的话_renderHandle=（{item}）=>{console.log（'item in_renderHandle:'，item）return（this.props.navigation.navigate（'HandleDetails'，{id:item.id，image\u url:item.image\u url，title:item.title，short\u desc:item.short\u desc}）image={item.image\u url}title={item.title}说明={item.short_desc}/>）}；