React-native UI 挑战

Question

今天我尝试进行如下所示的设计！ Image

但最后我设法做到了 50%。无法将最右边的按钮放在 View 的末尾。所以到目前为止我的代码 -

      const data = [
        {
          title: "Introduction\n06:25/17:45",
        },
        {
          title: "What is Design Thinking\n00:00 / 12:50",
        },
        {
          title: "What is UX Design?\n00:00/09:32",
        },
      ];
...
  const buttonStyle = {
    flex: 1,
    alignItems: "center",
    marginLeft: 15,
    marginRight: 15,
    flexDirection: "row",
    height: 57,
    borderRadius: 10,
    backgroundColor: "#fff",
    marginTop: "5%",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 6,
    },
    shadowOpacity: 0.39,
    shadowRadius: 8.3,

    elevation: 13,
  };

     <ScrollView
          style={{
            flex: 1,
            width: "100%",
            paddingTop: 20,
          }}
        >
          {data.map((item, index) => {
            return (
              <View style={buttonStyle} key={index}>
                <Image
                  source={require("./assets/play.png")}
                  style={{ height: 32, width: 32, marginLeft: "5%" }}
                />
                <Text
                  style={{
                    color: "#b5b3c2",
                    marginLeft: 15,
                    textAlign: "left",
                  }}
                >
                  {item.title}
                </Text>
                <Image
                  source={require("./assets/fail.png")}
                  style={{
                    height: 32,
                    width: 32,
                    justifyContent: "flex-end",
                  }}
                />
              </View>
            );
          })}
        </ScrollView>

My Image

如您所见，最右边的图片不在正确的位置？我不知道如何解决它？对不起我的英语不好！另外页面隐藏了我的ScrollView的一部分！

Answer 1

justifyContent 类似于标准 flexbox 中的 justify-content。它用于证明容器内的元素。您应该使用alignSelf: 'flex-end'，或在<Image /> 组件的左侧设置自动边距：

<Image
   source={require("./assets/fail.png")}
   style={{
        height: 32,
        width: 32,
        justifyContent: "flex-end",
    }}
/>

关于丢失的阴影，您需要使用contentContainerStyle 属性为 ScrollView 的内部组件添加填充：

<ScrollView
    style={{ flex: 1, width: "100%", paddingTop: 20 }}
    contentContainerStyle={{ paddingBottom: 20 }}
>

还值得注意的是，这可能应该呈现为<FlatList />，而不是<ScrollView />。