今天我试着做了一个如下所示的设计！

但最后，我成功地做到了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>

正如你所看到的，最右边的图片是不是在正确的位置？我不知道如何解决它？对不起，我的英语不好！也页隐藏我的一部分，我的ScrollView！