前端h5在移动端实现实：改造react-vant组件，将确定和取消按钮挪到底部，标题居左

在React中使用Vant UI组件库时，若想改变其默认布局，特别是将确认和取消按钮移到底部，标题居左，你需要对组件的样式进行自定义。以下是一个简化的示例：

import { Alert from 'vant' } // 引入Vant的Alert组件

const CustomAlert = (props) => {
  const { message, confirmText, cancelText, onConfirm, onCancel } = props;

  // 使用自定义样式覆盖默认样式
  const customStyle = {
    alert: {
      justifyContent: 'flex-start', // 文本左对齐
      alignItems: 'center', // 确保内容居中
      flexDirection: 'row-reverse', // 将按钮放在内容末尾
      paddingHorizontal: '0 20px',
    },
    button: {
      marginTop: 'auto', // 将按钮移至底部
    },
  };

  return (
    <Alert
      title={message}
      style={customStyle.alert}
      confirmText={confirmText}
      cancelText={cancelText}
      onConfirm={() => onConfirm()}
      onCancel={() => onCancel()}
      confirmButtonStyle={customStyle.button}
      cancelButtonStyle={customStyle.button}
    />
  );
};

// 使用CustomAlert组件
<CustomAlert message="这是一个提示" confirmText="确定" cancelText="取消" onConfirm={() => console.log('确认')} onCancel={() => console.log('取消')} />

在这个例子中，我们覆盖了`Alert`组件的`style`属性，并自定义了`alert`和`button`样式。`flexDirection: 'row-reverse'`会使按钮位于内容的最后面，而`marginTop: 'auto'`则让按钮自动移动到容器的底部。