[react-native] 네이티브 글로벌 스타일 반응

Program / 글쓴이

저는 React를 처음 접했고 컴포넌트 기반 인라인 스타일의 이점을 이해합니다. 그러나 일종의 글로벌 스타일을 가질 수있는 적절한 방법이 있는지 궁금합니다. 예를 들어 앱 전체에서 동일한 텍스트 및 버튼 색상을 사용하고 싶습니다.

모든 구성 요소에서 반복하는 대신 (필요한 경우 x 위치에서 변경해야 함) 초기 생각은 자체 파일에 ‘기본’StyleSheet 클래스를 만들어 내 구성 요소로 가져 오는 것입니다.

더 나은 또는 더 많은 ‘반응’방법이 있습니까?

답변

재사용 가능한 스타일 시트를 만들 수 있습니다. 예:

style.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

alwaysred: {
    backgroundColor: 'red',
    height: 100,
    width: 100,
},

});

구성 요소에서 :

var s = require('./style');

…그때:

<View style={s.alwaysred} ></View>

답변

스타일 (IE, Style.js)에 대한 파일을 만듭니다 .

다음은 예입니다.

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});

스타일을 사용하려는 파일에 다음을 추가하십시오.

import styles from './Style'

답변

일부 전역 변수를 설정하려면 시도해 볼 수 있습니다.

AppStyles.js

export default AppStyles = {
    colour: {
        background: '#f4f9fd',
        font: '#434e5a',
        primary: '#ff3b30'
    }
}

index.ios.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});

답변

전역 스타일링 변수를 지원하는 react-native-extended-stylesheet 를 사용해 볼 수도 있습니다 . 

// app.js
EStyleSheet.build({
   buttonColor: 'green'
});

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});

답변

‘ styles.js ‘와 같은 모든 스타일을 저장할 파일을 만들고 필요에 따라 CSS 유형 코드를 작성해야합니다.

'use strict';
import {StyleSheet} from 'react-native';

export default StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    title: {
        fontSize: 10,
        color: '#000',
        backgroundColor: '#fff'
    },

    button: {
        fontSize: 12,
        color: '#000',
        backgroundColor: '#fff'
    }

});

이제 보시다시피 전역 스타일을 사용할 수 있습니다.

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import StyleSheet from './config/styles';

export default class App extends Component {

  render() {
    return (
      <View
        style={StyleSheet.container}>
        <Button
          style={StyleSheet.button}
          title="Go to Lucy's profile"
        />
      </View>
    );
  }
}

답변

내 라이브러리 react-native-style-tachyons를 사용해보십시오 . 이것은 전역 스타일을 제공 할뿐만 아니라 루트 글꼴 크기에 상대적인 너비와 높이를 가진 디자인 우선 반응 형 레이아웃 시스템입니다.

답변

이 모든 방법은 질문에 직접 대답하지만 내가 아는 한 React와 같은 구성 요소 기반 디자인 시스템에서 수행하는 방법이 아닙니다.

원자 구성 요소로 시작한 다음 계층화하고 그룹화 할 수 있습니다. 다음 기사는 이러한 사고의 흐름을 더 명확하게 만들 수 있습니다.
http://atomicdesign.bradfrost.com/chapter-2/

자연계에서는 원자 원소가 결합하여 분자를 형성합니다. 이 분자들은 더 결합하여 비교적 복잡한 유기체를 형성 할 수 있습니다.

존재하지 않는 기본 구성 요소가 필요하면 만듭니다. 그런 다음 다른 덜 구체적인 구성 요소를 만들 수 있습니다. 예를 들면 :

// rerender is cheaper without style prop when
// the default style is an unchanged reference
// instead of a new object every time.
const style = {
  color   : 'MidnightBlue',
  fontSize: 14,
}

function getStyle (styleProp) {
  // styleProp is able to overwrite style
  if (styleProp) return {...style, ...styleProp}
  else return style
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}

그런 다음 사용하는 CustomText모든 곳에서 대신 Text. 또한 함께 할 수있는 View, div, span다른 사람 또는 아무것도.