Question

在React Native中，视图元素接受style属性，该属性在驼峰式对象中使用CSS属性名称：

const styleObj = {
  width: 200,
  marginTop: 10
}

元素还接受如下样式对象数组：

<MyComponent style={[ styleObj, styleProp && styleProp ]} />

我有几个抽象的按钮组件，它们依赖于共享的基本按钮界面。为简单起见：

interface IButton {
  style?: ViewStyle | ViewStyle[] // <-- ViewStyle is exported by react native, and contains all the allowed style properties for a View component
}

我认为这个定义就足够了，但是我遇到了一些我很难理解的问题。

我有一个DropDown组件，它呈现一个Button。当我使用样式道具时，出现错误：

<Button
  style={[
    {
      backgroundColor: backgroundColor || COLORS.lightRed,
      borderRadius: 3,
      height: 44,
      width: '100%',
     },
     style && style, // <-- type is ViewStyle | ViewStyle[], this is passed in as a prop
  ]}

以上抛出错误：

Type (ViewStyle | ViewStyle[] | undefined)[] is not assignable to ViewStyle | ViewStyle[] | undefined

如果我强制转换样式：style && (style as ViewStyle)，则会收到另一个错误：

Type (ViewStyle | undefined)[] is not assignable to ViewStyle[]

如果我将整个数组转换为ViewStyle，错误将清除：

<Button
  style={[
    {
      backgroundColor: backgroundColor || COLORS.lightRed,
      borderRadius: 3,
      height: 44,
      width: '100%',
     },
     style && style,
  ] as ViewStyle}

哪个很好，但我有点困惑。我有一种预感，因为我的组件使用的是相同的props接口，所以TypeScript变得令人困惑。最终，我不确定为什么会发生这些错误，以及我需要依靠强制转换的定义有何不正确之处。

Answer 1

很明显，这花了我一段时间才能找到最佳解决方案。

在键入样式道具时，请使用//form Submit $("form").submit(function(evt){ evt.preventDefault(); $("#upload").html("<img src='http://crabsheet.com/cs/wp-content/uploads/2012/08/capture-1.gif'>"); var formData = new FormData($(this)[0]); $.ajax({ url: 'upload.php', type: 'POST', data: formData, async: true, cache: false, contentType: false, enctype: 'multipart/form-data', processData: false, success: function (response) { $("#upload").html(response); } }); return false; });，<?php $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["opepdf"]["name"]); $fileName = $_FILES['opepdf']['name']; $fileType = $_FILES['opepdf']['type']; $fileError = $_FILES['opepdf']['error']; $fileContent = file_get_contents($_FILES['opepdf']['tmp_name']); if($fileError == UPLOAD_ERR_OK){ //Processes your file here if (move_uploaded_file($_FILES["opepdf"]["tmp_name"], $target_file)) { echo "The file ". basename( $_FILES["opepdf"]["name"]). " has been uploaded."; } else { echo "Error uploading your file."; } }else{ switch($fileError){ case UPLOAD_ERR_INI_SIZE: $message = 'MAX UPLOAD SIZE Reached'; break; case UPLOAD_ERR_FORM_SIZE: $message = 'MAX FORM Upload Size Reached'; break; case UPLOAD_ERR_PARTIAL: $message = 'Could not finish Upload'; break; case UPLOAD_ERR_NO_FILE: $message = 'NO upload File'; break; case UPLOAD_ERR_NO_TMP_DIR: $message = 'Servernot configured for file upload'; break; case UPLOAD_ERR_CANT_WRITE: $message= 'CANT WRITE'; break; case UPLOAD_ERR_EXTENSION: $message = 'Could not finish Upload.'; break; default: $message = 'Could not finish Upload'; break; } echo json_encode(array( 'error' => true, 'message' => $message )); } ?>等（而不是ViewStyle），并且在传递一系列样式时，只需使用TextStyle即可使任何类型静音不兼容：

StyleProp<T>

如何为组件输入样式属性以接受数组？

1 个答案: