네이티브 글로벌 스타일 반응

네이티브 글로벌 스타일 반응

---

저는 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를 사용해보세요. 이것은 전역 스타일을 제공 할뿐만 아니라 루트 글꼴 크기에 상대적인 너비와 높이를 가진 디자인 우선 반응 형 레이아웃 시스템입니다.

---

외부 CSS 파일 main.css

'use strict';

var {
   StyleSheet,
 } = 'react-native';

module.exports = StyleSheet.create({

  main: {
     backgroundColor: 'gray',
     height: 20,
     width: 100,
  }
});

구성 요소에 CSS 파일의 인스턴스를 만듭니다.

var mainCss = require('./main');

<View style={mainCss.main}><Text>Hello</Text></View>

---

All these methods directly answer the question but it's not the way to do it. These people are stuck in the old way of thinking where you style the available elements. In React you make components. So if you need a base component that does not exist, you make it. for instance:

function getStyle (styleProp) {
  return {
    color   : getTheme().text,
    fontSize: 14,
    ...styleProp
  }
}

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

and then use CustomText everywhere instead of Text. You can also do it with View, div, span or anything else.

---

Take a look at Shoutem Themes for React Native.

Here is what you get with Shoutem Theme:

Global style where certain style is automatically applied to component by its style name:

const theme = {
  'my.app.ComponentStyleName': {
    backgroundColor: 'navy',
  },
};

Activating certain component specific style with styleName (like CSS class):

const theme = {
  'my.app.ComponentStyleName': {
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>

Automatic style inheritance:

const theme = {
  'my.app.ComponentStyleName': {
    'my.app.ChildComponentStyleName': {
      backgroundColor: 'red',
    },
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply red background color to ChildComponent
<Component styleName="rounded">
  <ChildComponent/>
</Component>

Nested style for composed components:

const theme = {
  'my.app.ComponentStyleName': {
    containerView: {
      paddingTop: 10,
    },
    innerView: {
      backgroundColor: 'yellow',
    },
  },
};

// Of course do not forget to connect Component
function Component({ style }) {
  return (
   <View style={style.containerView}>
    <View style={style.innerView}>
     <Text>Warning with yellow background.</Text>
    </View>
   </View>
  );
}

To get it work you need to use StyleProvider, the wrapper component which provides style to all other component through context. Similar to Redux StoreProvider.

Also you need to connect your component to style with connectStyle so you always use connected component. Similar to Redux connect.

export const styledComponent = connectStyle('my.app.ComponentStyleName',
                                { ...defaultStyleIfAny })(Component);

You can see example within documentation.

One last thing, we have also provided set of components in our UI ToolKit which are already connected to style, so you can just import them and style in your global style/theme.

참고URL : https://stackoverflow.com/questions/30853178/react-native-global-styles