web-dev-qa-db-ja.com

React Nativeのマージンまたはパディングの略記

React Native？

[〜＃〜] css [〜＃〜]

margin: 10px 20px;
cssreact-native
23
Jeaf Gilbert

プレーンReact Nativeスタイルを使用する場合、上記のcssを

 {
 marginVertical：10、
 marginHorizo​​ntal：20 
}

それ以外の場合、 styled-components のようなものを使用している場合、上記の構文を実現できます。 css-to-react-native フードの下。

32
rk1

過去のプロジェクトでこのヘルパー関数を作成しました：

const getShortHand = (style: string, ...values) => {
  if (values.length === 1) {
    return { [style]: values[0] }
  }
  const _genCss = (...values) => ({
    [style + 'Top']: values[0],
    [style + 'Right']: values[1],
    [style + 'Bottom']: values[2],
    [style + 'Left']: values[3],
  })
  if (values.length === 2) {
    return _genCss(values[0], values[1], values[0], values[1])
  }
  if (values.length === 3) {
    return _genCss(values[0], values[1], values[2], values[1])
  }
  return _genCss(values[0], values[1], values[2], values[3])
}

export const padding = (...values: Array<number | string>) => getShortHand('padding', ...values)
export const margin = (...values: Array<number | string>) => getShortHand('margin', ...values)

使用法は、通常のcssの短縮形と似ています。

const styles = StyleSheet.create({
  button: {
    ...padding(12, 20),
  },
}
6
Kazuya Gosho