javascript - 带有 Typescript 的 ES6 箭头函数

Question

对 Typescript 非常陌生，我不确定如何进行这项工作。

做了一些研究，比如解构，但还是没能把它弄好。

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; }>'

Answer 1

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

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;