javascript - 带 typescript 的ES6箭头功能

对字体来说是非常陌生的，
我不知道该怎么做。
做了一些研究，比如破坏，但还是没能把它弄清楚。

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
};

const App = (style: any): {} => {
  const { container } = styles;
  return (
    <View style={container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
};

export default App;

错误如下：

(JSX attribute) style?: StyleProp<ViewStyle>
Type '{ flex: number; backgroundColor: string; alignItems: string; justifyContent: string; }' is not assignable to type 'StyleProp<ViewStyle>'.
  Type '{ flex: number; backgroundColor: string; alignItems: string; justifyContent: string; }' is not assignable to type 'ViewStyle'.
    Types of property 'alignItems' are incompatible.
      Type 'string' is not assignable to type 'FlexAlignType'.ts(2322)
index.d.ts(2206, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'

最佳答案

明确指定“容器”的类型。您可以从ViewStyle包中使用泛型react-native类型：

import React from "react";
import { StyleSheet, Text, View, ViewStyle } from "react-native";

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  } as ViewStyle
};

const App = () => {
  const { container } = styles;
  return (
    <View style={container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
};

export default App;

关于javascript - 带 typescript 的ES6箭头功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57436486/