如何在屏幕宽度上扩展图像？

Question

我正在尝试使图像水平滚动。我下载了一些用户界面，并添加了水平滚动视图。但是，它不仅具有水平滚动的能力看起来相同，而是缩小了图像（并且还赋予了它水平滚动的能力）。我应该改变什么让它一直延伸（仍然有填充）？

Posts.js

import React from "react";
import {
  View,
  Text,
  Image,
  ImagBackground,
  ImageBackground,
} from "react-native";
import Icon from "@expo/vector-icons/Entypo";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";

export default class Posts extends React.Component {
  state = {
    liked: false,
  };
  onLike = () => {
    this.setState({ liked: !this.state.liked });
  };
  render() {
    const { name, profile, photo, onPress } = this.props;

    return (
      <View>
        <View
          style={{
            flexDirection: "row",
            paddingTop: 25,
            alignItems: "center",
          }}
        >
          <View style={{ width: "20%" }}>
            <Image
              source={profile}
              style={{
                width: 45,
                height: 45,
                borderRadius: 13,
              }}
            />
          </View>
          <View
            style={{
              width: "60%",
            }}
          >
            <Text
              style={{
                fontFamily: "Bold",
                fontSize: 14,
                color: "#044244",
              }}
            >
              {name}
            </Text>

            <Text
              style={{
                fontFamily: "Medium",
                fontSize: 12,
                color: "#9ca1a2",
              }}
            >
              2 mins ago
            </Text>
          </View>
          <View
            style={{
              width: "20%",
              alignItems: "flex-end",
            }}
          >
            <Icon name="sound-mix" color="#044244" size={20} />
          </View>
        </View>
        <View
          style={{
            flexDirection: "row",
            width: "100%",
            paddingTop: 20,
          }}
        >
          <ScrollView horizontal>
            <ImageBackground
              source={photo}
              style={{
                width: "100%",
                height: 220,
              }}
              imageStyle={{
                borderRadius: 30,
              }}
            >
              <View
                style={{
                  height: "100%",
                  flexDirection: "row",
                  alignItems: "flex-end",
                  justifyContent: "flex-end",
                }}
              >
                <TouchableOpacity
                  onPress={onPress}
                  style={{
                    marginBottom: 20,
                    borderRadius: 5,
                    padding: 5,
                    backgroundColor: "#e8e8e8",
                  }}
                >
                  <Icon name="forward" color="#044244" size={20} />
                </TouchableOpacity>

                <TouchableOpacity
                  onPress={this.onLike}
                  style={{
                    marginBottom: 20,
                    borderRadius: 5,
                    padding: 5,
                    backgroundColor: "#e8e8e8",
                    marginLeft: 10,
                    marginRight: 20,
                  }}
                >
                  <Icon
                    name={
                      this.state.liked === true ? "heart" : "heart-outlined"
                    }
                    color={this.state.liked === true ? "red" : "#044244"}
                    size={20}
                  />
                </TouchableOpacity>
              </View>
            </ImageBackground>
          </ScrollView>
        </View>
      </View>
    );
  }
}

这是我添加更多的单词，因为帖子本身没有足够的单词。他们什么时候才能最终删除这个毫无意义的功能？我觉得我用我用的几句话清楚地表达了我的问题。

Answer 1

• 我相信您的问题在于您的View 包装了您的ScrollView。无需将ScrollView 包装在row 中，因此剩余空间可见。只需定义ScrollView，它就可以正常工作。不过，将100% 的宽度设置为ScrollView。
• 对于 ScrollView 的父级的任何样式，请在 ScrollView 本身内部进行，就像我在代码中所做的那样。
• 请注意ScrollView 接受子项列表，目前我只看到一个项，如果您有意添加了一项，则可以，否则，您需要重构代码一定。这不适合你。

        // PLEASE NOTE --> Commented Lines should be removed, and 
        // only ScrollView should be considered with the styling specified
        // <View
          // style={{
            // flexDirection: "row",
            // width: "100%",
            // paddingTop: 20,
          // }}
        // >
          <ScrollView horizontal 
          style={{ 
              width: '100%', 
              marginTop: 20, 
              paddingLeft: 16, 
              paddingRight: 6
          }}>
            <ImageBackground
              source={photo}
              style={{
                width: "100%",
                height: 220,
                marginRight: 10
              }}
              imageStyle={{
                borderRadius: 30,
              }}
            >
              <View
                style={{
                  height: "100%",
                  flexDirection: "row",
                  alignItems: "flex-end",
                  justifyContent: "flex-end",
                }}
              >
                <TouchableOpacity
                  onPress={onPress}
                  style={{
                    marginBottom: 20,
                    borderRadius: 5,
                    padding: 5,
                    backgroundColor: "#e8e8e8",
                  }}
                >
                  <Icon name="forward" color="#044244" size={20} />
                </TouchableOpacity>

                <TouchableOpacity
                  onPress={this.onLike}
                  style={{
                    marginBottom: 20,
                    borderRadius: 5,
                    padding: 5,
                    backgroundColor: "#e8e8e8",
                    marginLeft: 10,
                    marginRight: 20,
                  }}
                >
                  <Icon
                    name={
                      this.state.liked === true ? "heart" : "heart-outlined"
                    }
                    color={this.state.liked === true ? "red" : "#044244"}
                    size={20}
                  />
                </TouchableOpacity>
              </View>
            </ImageBackground>
          </ScrollView>
        // </View>