javascript - 在平面列表中的项目旁边对齐标题？

Question

我在 flatList 中有 2 列，我正在尝试对齐项目本身之外的标题组件，

像这样

但我得到了上面的“添加图像”，然后是它下面的项目，

我正在尝试通过使用flexWrap内容容器样式来解决它，但由于我使用的是 numColumns，所以我收到了一个警告，提示flexWrap不支持并改用 numColumns。所以我不知道我该如何解决它，所以如果有人可以在这种情况下提供帮助！

这是小吃

代码片段

const renderItems = ({ item, index }) => {
    return (
      <View style={{ flex: 0.5, margin: 4 }}>
        <View style={[styles.imgContainer, { borderWidth: 0 }]}>
          <Image
            style={styles.imgStyle}
            source={{
              uri:
                'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1K8ypPsfNVQU8lVxl1i2_ajismMS_w6FA4Q&usqp=CAU',
            }}
          />
        </View>
      </View>
    );
  };
  const renderHeader = () => (
    <TouchableOpacity
      // onPress={appeandImgs}
      style={styles.imgContainer}>
      <Image
        style={styles.imgStyle}
        source={{
          uri: 'https://static.thenounproject.com/png/3322766-200.png',
        }}
      />
    </TouchableOpacity>
  );
  const keyExtractor = (item, index) => String(index);

 <FlatList
          data={[1,2,3]}
          style={styles.flatList}
          numColumns={2}
          renderItem={renderItems}
          ListHeaderComponentStyle={{
            backgroundColor: '#ff0',
            width: ScreenWidht / 2 - 20,
          }}
          keyExtractor={keyExtractor}
          ListHeaderComponent={renderHeader}
          columnWrapperStyle={{
            backgroundColor: '#f07',
          }}
          contentContainerStyle={{ 
               flexGrow: 1,
               paddingBottom: 12,
               paddingTop: 15,
          }}
        />

标签： javascriptcssreactjsreact-nativereact-native-flatlist