我正在尝试使用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