Question

import {StyleSheet, TextStyle, ViewStyle} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  login: {
    padding: 8,
  },
  forgot: {
    marginTop: 12,
  },
  labelStyle: {
    login: {
      fontSize: 12,
    },
    logout: {
      fontSize: 12,
    },
  },
});

export default styles;

Class sheet and Component Class

labelStyle错误

期望的类型来自属性'labelStyle'，该属性在此处声明为'NamedStyles |类型。 NamedStyles <{container：{flex：number; justifyContent：“中心”; alignItems：“中心”; };登录名：{padding：number; };

Answer 1

你不能也不是真的可读。

在我看来，这应该不是问题，因为组件被设计为非常具体，因此您的CSS样式表也是如此。

const styles = StyleSheet.create({
  container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
  },
  ...
  login: {
    fontSize: 12,
  },
  logout: {
    fontSize: 12,
  },
});

Answer 2

是的，我写的只是我将要从javascript重构为打字稿的部分示例，因为我的样式表嵌套得多

以我的样式表为例

/*
 * ---------------------------------------------------------------------------------------
 * ---------------------------------------------------------------------------------------
 *  IMPORTS
 * ---------------------------------------------------------------------------------------
 * ---------------------------------------------------------------------------------------
 */

// ----------------------------------------
// LOCAL & CONFIG IMPORTS
// ----------------------------------------
import { Colors, Sizes } from "../../../configs";

export default {
  container: {
    flex: 1,
    backgroundColor: Colors.main.baseWhite,
    paddingTop: Sizes.isAndroid ? 26 : 8,
  },

  innerContainer: {
    // paddingTop: Sizes.screen.paddingTop,
    paddingBottom: 22,
  },

  innerContainerStatic: {
    flex: 1,
    paddingTop: Sizes.screen.paddingTop,
  },

  backgroundContent: {
    container: {
      flex: -1,
      position: "absolute",
      width: Sizes.screen.width,
      height: Sizes.screen.height,
    },

    content: {
      height: 140,
    },
  },

  footer: {
    grouper: {
      flex: -1,
      height: 71,
      flexDirection: "row",
      borderColor: Colors.main.borderGray,
      paddingHorizontal: Sizes.screen.paddingHorizontal,
      paddingBottom: Sizes.screen.paddingBottom,
      backgroundColor: Colors.main.softGray,
    },

    bottomFiller: {
      flex: -1,
      position: "absolute",
      width: Sizes.screen.width,
      height: 40,
      bottom: -40,
      backgroundColor: Colors.main.softGray,
    },

    blankBottom: {
      flex: -1,
      position: "absolute",
      width: Sizes.screen.width,
      height: 40,
      bottom: -40,
      backgroundColor: Colors.main.baseWhite,
    },

    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      paddingTop: 13,
    },

    icon: {
      container: {
        flex: -1,
        width: 32,
        height: 32,
        paddingBottom: 6,
      },
    },

    counter: {
      container: {
        flex: -1,
        position: "absolute",
        backgroundColor: Colors.main.baseRed,
        paddingHorizontal: 4,
        top: -5,
        right: -5,
        borderRadius: 50,
      },
    },
  },

  bottomPadder: {
    paddingBottom: 16,
  },
};

如何在本机中使用样式表嵌套打字稿

2 个答案: