如何在react native中使用样式表嵌套类型脚本

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;

类表和组件类

标签样式错误

预期的类型来自属性'labelStyle'，该属性在类型'NamedStyles|NamedStyles'中声明

Answer 1

没错，我所写的只是我将从javascript重构为typescript的部分示例，因为我的样式表更加嵌套

示例我的样式表

/*
 * ---------------------------------------------------------------------------------------
 * ---------------------------------------------------------------------------------------
 *  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,
  },
};

Answer 2

你不能，这也不是真正可读的。

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

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