TypeScript react-native.StyleSheet类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中react-native.StyleSheet类的典型用法代码示例。如果您正苦于以下问题：TypeScript StyleSheet类的具体用法？TypeScript StyleSheet怎么用？TypeScript StyleSheet使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了StyleSheet类的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: if

export const dismemberStyle = (style?: StyleProp<ViewStyle>): { wrapperStyle: ViewStyle; innerStyle: ViewStyle; } => {
  const flattenStyle: ViewStyle & { [key: string]: any } = StyleSheet.flatten(style)
  const wrapperStyle: ViewStyle & { [key: string]: any } = {}
  const innerStyle: ViewStyle & { [key: string]: any } = {}
  if (flattenStyle) {
    Object.keys(flattenStyle).forEach((key: string) => {
      if (SYNC_TYPE_STYLE_REGEX.test(key)) {
        wrapperStyle[key] = flattenStyle[key]
        innerStyle[key] = flattenStyle[key]
      } else if (WRAPPER_TYPE_STYLE_REGEX.test(key)) {
        wrapperStyle[key] = flattenStyle[key]
      } else {
        innerStyle[key] = flattenStyle[key]
      }
    })
  }
  return {
    wrapperStyle,
    innerStyle
  }
}

开发者ID:YangShaoQun，项目名称:taro，代码行数:21，代码来源:index.ts

示例2:

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
  },
})

开发者ID:appirio-digital，项目名称:react-native-session-timer-modal，代码行数:7，代码来源:styles.ts

示例3:

import { colors, screenWidth } from "../styles";
import {
  StyleSheet,
} from 'react-native';
let textColor = colors.white;

export const tutorialStyle = StyleSheet.create({
header: {
    color: textColor.hex,
    fontSize: 25,
    fontWeight:'800'
},
text: {
    color: textColor.hex,
    fontSize: 16,
    textAlign:'center',
    fontWeight:'500'
},
subText: {
    color: textColor.rgba(0.5),
    fontSize: 13,
},
explanation: {
    width: screenWidth,
    color: textColor.rgba(0.5),
    fontSize: 13,
    textAlign:'center'
}
});

开发者ID:crownstone，项目名称:CrownstoneApp，代码行数:29，代码来源:TutorialStyle.ts

示例4:

export default StyleSheet.create({
  wrapper: {
    width: '100%',
    borderColor: '#e0e0e0',
    height: AUDIO_HEIGHT,
    borderWidth: 1,
    borderRadius: 2,
    backgroundColor: 'white'
  },
  container: {
    flexDirection: 'row',
    paddingHorizontal: 8,
    width: '100%',
  },
  progressBar: {
    width: '100%',
    height: PROGRESS_BAR_HEIGHT,
    backgroundColor: '#c9c9c9'
  },
  progressBarTint: {
    height: PROGRESS_BAR_HEIGHT,
    backgroundColor: '#09BB07'
  },
  poster: {
    width: AUDIO_HEIGHT - 2 - PROGRESS_BAR_HEIGHT,
    height: AUDIO_HEIGHT - 2 - PROGRESS_BAR_HEIGHT,
    backgroundColor: '#e6e6e6'
  },
  posterImg: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  playIcon: {
    textAlign: 'center',
  },
  info: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 6,
    paddingHorizontal: 14,
    height: AUDIO_HEIGHT - 2 - PROGRESS_BAR_HEIGHT,
  },
  detail: {
    justifyContent: 'center'
  },
  name: {
  },
  nameText: {
    fontSize: 13,
    color: '#353535'
  },
  author: {
    marginTop: 9
  },
  authorText: {
    fontSize: 12,
    color: '#888'
  },
  time: {
  },
  timeText: {
    fontSize: 10,
    color: '#888'
  }
})

开发者ID:YangShaoQun，项目名称:taro，代码行数:68，代码来源:styles.ts

示例5: LightTheme

import { StyleSheet } from 'react-native';
import { colors, LightTheme, dimensions } from './lightTheme';

const darkColors = {
  ...colors,
  background: '#343a40',
  foreground: '#ffffff',
};

export const darkTheme = StyleSheet.create(
  new LightTheme(darkColors, dimensions),
);

开发者ID:este，项目名称:este，代码行数:12，代码来源:darkTheme.ts

示例6: removeDisplay

 export function create<T>(style: T): T {
     removeDisplay(style);
     return StyleSheet.create(style);
 }

开发者ID:kimamula，项目名称:SmartNavi，代码行数:4，代码来源:StyleSheet.native.ts

示例7:

} from 'react-native';
import {colors} from "../../styles";

export const WNStyles = StyleSheet.create({
  important: {
    fontSize: 14,
    fontWeight:'bold',
    color: colors.red.hex,
    textAlign:'center'
  },
  text: {
    fontSize: 15,
    fontWeight:'bold',
    color: colors.csBlue.hex,
    textAlign:'center'
  },
  detail: {
    fontSize: 13,
    color: colors.csBlue.rgba(0.75),
    textAlign:'center'
  },
  innerScrollView: {
    alignItems: 'center',
    paddingBottom: 50,
    paddingLeft: 10,
    paddingRight: 10,
  },
  outerScrollView: {
  },
});

开发者ID:crownstone，项目名称:CrownstoneApp，代码行数:30，代码来源:WhatsNewStyles.ts

示例8: LightTheme

      ...buttonPadding,
      ...this.borderGrayLight,
    };

    this.buttonDisabled = {
      opacity: 0.5,
    };

    this.validationError = {
      ...this.textSmall,
      color: colors.danger,
      fontWeight: 'bold',
      minHeight: typography.lineHeight,
    };

    this.marginStartAuto = {
      marginStart: 'auto',
    };

    this.label = {
      ...this.textSmall,
      color: colors.gray,
      padding: typography.lineHeight / 6,
      textTransform: 'uppercase',
    };
  }
}

export const lightTheme = StyleSheet.create(new LightTheme(colors, dimensions));
export type Theme = typeof lightTheme;

开发者ID:este，项目名称:este，代码行数:30，代码来源:lightTheme.ts

示例9:

export default StyleSheet.create({
  safeAreaView: {
    flex: 1,
    backgroundColor: bg,
  },
  scrollView: {
    flex: 1,
  },
  safeAreaViewBlack: {
    flex: 1,
    backgroundColor: "black",
  },
  scrollViewNotBlack: {
    flex: 1,
    backgroundColor: bg,
  },
  viewAppleBar: {
    padding: 16,
  },
  viewAppleBarContent: {
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderBottomColor: elBg,
  },
  viewAppleBarRow: {
    flexDirection: "row",
  },
  viewMotd: {
    margin: 16,
    backgroundColor: elBg,
    padding: 16,
    borderRadius: 16,
    shadowRadius: 6,
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.1,
  },
  viewAnimeList: {
    paddingTop: 16,
  },
  viewEpisodeList: {
    flex: 1,
    width: "100%",
  },
});

开发者ID:Jinnial，项目名称:twist-native，代码行数:47，代码来源:styles.ts

示例10:

export const topBarStyle = StyleSheet.create({
  topBar: {
    backgroundColor: colors.menuBackground.hex,
    flexDirection: 'row',
    paddingTop: statusBarHeight
  },
  topBarCenterView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  topBarLeft: {
    textAlign: 'left',
  },
  topBarLeftTouch: {
    // backgroundColor:'#ff0',
    height:barHeight,
    width:80,
    paddingLeft: 10,
    alignItems:'flex-start',
    justifyContent:'center'
  },
  topBarRightTouch: {
    // backgroundColor:'#ff0',
    height:barHeight,
    width:80,
    paddingRight: 10,
  },
  topBarCenter: {
    textAlign: 'center',
  },
  topBarRight: {
    textAlign: 'right',
  },
  titleText: {
    fontSize: 18,
    color: 'white'
  },
  text:{
    fontSize: 17,
    fontWeight:'bold',
    color: colors.menuTextSelected.hex
  }
});

开发者ID:crownstone，项目名称:CrownstoneApp，代码行数:44，代码来源:TopbarStyles.ts

注：本文中的react-native.StyleSheet类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。