Question

我正在尝试使用react-native中的样式组件创建一个TouchableOpacity，并且工作正常，但是由于我使用打字稿，因此在使用样式flowDirection: 'row'时显示一些错误

这是我的代码

interface IDefaultStyle {
  style?: object
}

const RootContainer = styled.TouchableOpacity((props: IDefaultStyle) => ({
  flexDirection: 'row',
  ...props.style
}))

并且类型错误是

Argument of type '(props: IDefaultStyle) => { flexDirection: string; } | { flexDirection: string; }' is not assignable to parameter of type 'TemplateStringsArray'.

当我删除flexDirection并添加任何其他样式类型时。错误消失了。

在给定Text的样式化组件fontWeight: 'bold'中看到相同的问题

我的 package.json

{
  "name": "@appmaker/ui",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "peerDependencies": {
    "react": "16.9.0",
    "react-native": "0.61.2"
  },
  "devDependencies": {
    "@babel/core": "7.6.4",
    "@babel/preset-typescript": "^7.7.2",
    "@babel/runtime": "7.6.3",
    "@react-native-community/eslint-config": "0.0.3",
    "@types/jest": "^24.0.20",
    "@types/react": "^16.9.11",
    "@types/react-native": "^0.60.22",
    "@types/react-test-renderer": "^16.9.1",
    "@types/styled-components": "^4.1.20",
    "@typescript-eslint/eslint-plugin": "^2.5.0",
    "@typescript-eslint/parser": "^2.5.0",
    "babel-jest": "24.9.0",
    "babel-plugin-styled-components": "^1.10.6",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.51.1",
    "prettier": "^1.18.2",
    "react-test-renderer": "16.9.0",
    "tslint": "^5.20.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-config-standard": "^8.0.1",
    "tslint-eslint-rules": "^5.4.0",
    "tslint-react": "^4.1.0",
    "typescript": "^3.6.3",
    "typescript-plugin-styled-components": "^1.4.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  },
  "bit": {
    "env": {
      "compiler": "bit.envs/compilers/react-typescript@3.0.27"
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
  },
  "dependencies": {
    "i": "^0.3.6",
    "npm": "^6.12.0",
    "prop-types": "^15.7.2",
    "react-native-image-slider": "^2.0.3",
    "react-native-image-slider-box": "^1.0.5",
    "react-native-snap-carousel": "^3.8.3",
    "styled-components": "^4.4.0"
  }
}

如果有人可以帮助我，将不胜感激

修改组件使用

/**
 * ## AuthorView  | SellerView
 * Component to show Author info
 * @param props
 */
const AuthorView = (props: IProps) => {

  const { name, style, imageUrl, rating, subtext, onPress } = props

  // if imageUrl is not provided use default star icon
  const imageSource = imageUrl ? { uri: imageUrl } : require('../../icons/star-grey.png')

  return(
    <RootContainer onPress={onPress} style={style}>
        <ImageViewContainer>
            <ImageView
              defaultImage={imageUrl ? false : true}
              source={ imageSource }
            />
        </ImageViewContainer>
        <RightContainer>
            <Name>{name}</Name>
            <View style={{ flexDirection: 'row' }}>
            {rating && <RatingView style={{ marginRight: 3 }} rating={rating} />}
            <SubText>{subtext}</SubText>
            </View>
        </RightContainer>
    </RootContainer>
  )
}

export default AuthorView

Answer 1

flexDirection：“行”为常量

这为我解决了这个问题。

Answer 2

改变

const RootContainer = styled.TouchableOpacity((props: IDefaultStyle)
=> ({   flexDirection: 'row',   ...props.style }))

到

const RootContainer = styled.TouchableOpacity<IDefaultStyle>`  
    flexDirection: row;
    ${...props.style}
`

Typescript React-native样式化组件中的类型问题

2 个答案: