如何解决 React Native 中的 ViewStyle 打字稿错误？

Question

我正在尝试将宽度参数传递到样式表中，如下所示：

      <View style={styles.children(width)}>{children}</View>

并像这样使用它：

 
const styles = StyleSheet.create({
  modalContent: {
    flex: 1,
    justifyContent: 'center',
    margin: '5%',
  },
  modalOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  children: (width: any) => ({
    width: width,
    backgroundColor: 'white',
    position: 'absolute',
    bottom: 0,
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    paddingVertical: 30,
    paddingHorizontal: 20,
  }),
});
,

但是打字稿抛出错误This expression is not callable. No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable.

我该如何解决这个打字稿问题？

Answer 1

如果你想将道具传递给样式表，你必须这样做

或者

您可以通过创建返回 ViewStyle 的函数来使用

import * as React from "react"
import {View,ViewStyle,StyleSheet} from "react-native"

const App = () => {
  return (<View style={Container(width)}></View>)
})

const Container = (width: number | string): ViewStyle => ({
  width: width,
  height: '50%',
  backgroundColor: 'white',
  position: 'absolute',
  bottom: 0,
  borderTopRightRadius: 40,
  borderTopLeftRadius: 40,
  paddingTop: 10,
  paddingHorizontal: 20,
})

Answer 2

我用 typescript 以另一种方式解决了实现它的问题：

import React, { FC } from "react";
import {
  ActivityIndicator,
  StyleSheet,
  TextStyle,
  TouchableOpacity,
  ViewStyle,
  Platform,
} from "react-native";
import { colors } from "../../styles";
import { fonts } from "../../styles";
import Text from "./Text";

interface ButtonProps {
  style?: ViewStyle;
  disabled?: boolean | undefined;
  onPress?: any;
  text?: string;
  bordered?: boolean;
  textStyle?: TextStyle;
  loading?: boolean;
}

const Button: FC<ButtonProps> = ({
  style,
  disabled,
  onPress,
  text,
  bordered,
  textStyle,
  loading,
}) => {
  const { OS } = Platform;
  return (
    <TouchableOpacity
      activeOpacity={0.6}
      disabled={disabled || false}
      onPress={onPress}
      style={{ ...styles({ disabled, bordered, OS }).button, ...style }}
    >
      <Text
        style={{ ...styles({ disabled, bordered }).buttonText, ...textStyle }}
      >
        {loading ? <ActivityIndicator color="white" size={30} /> : text}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;

interface StylesProps {
  bordered?: boolean;
  disabled?: boolean;
  OS?: string;
}

interface StyleSheetType {
  button: ViewStyle;
  buttonText: TextStyle;
}

type StylesFunctionProps = (props: StylesProps) => StyleSheetType;

const styles: StylesFunctionProps = ({ bordered, disabled, OS }) =>
  StyleSheet.create<StyleSheetType>({
    button: {
      borderRadius: OS === "ios" ? 17 : 20,
      backgroundColor: disabled ? colors.gray : bordered ? "white" : colors.red,
      paddingVertical: 15,
      alignItems: "center",
      borderWidth: bordered && !disabled ? 1 : 0,
      borderColor: colors.red,
    },
    buttonText: {
      fontSize: 20,
      // fontFamily: fonts.regular, // light
      color: bordered && !disabled ? colors.red : "white",
    },
  });