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

标签样式错误

---

预期的类型来自属性“labelStyle”，该属性在类型“NamedStyles | NamedStyles上声明，您无法也无法真正阅读

在我看来，这不应该是一个问题，因为组件的设计非常详细，因此您的css样式表也是如此

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;

---

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

示例我的样式表

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

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