无法在本机反应中正确对齐文本下方的按钮

Question

我正在尝试在左侧文本下方对齐按钮以响应本机。以下是我的代码：

function Description(props){
    return(
        <><View style={{flexShrink: 1}}><Text style={{flexShrink: 1}}>{props.description}</Text></View>
        <View><Button title="Delete" /></View></>
    );
}

但这就是它的出现方式： Click here to see the picture

我希望蓝色的删除按钮位于文本下方和左侧。我也尝试将 Text 放在 View 中并将 flexDirection 设置为列，但效果不佳。请告诉我需要对代码进行哪些更改才能正确放置按钮。

谢谢！

Answer 1

试试这个...

<View style={{ padding: 20 }}>
    <Text>{props.description}</Text>
    <TouchableOpacity
      style={{
        marginTop: 20,
        backgroundColor: "cornflowerblue",
        height: 45,
        width: 100,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={{ fontSize: 17, color: "white" }}>Delete</Text>
    </TouchableOpacity>
  </View>

根据您的要求进行编辑...