TypeScript react-native.StyleSheet類代碼示例

本文整理匯總了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；未經允許，請勿轉載。