React Native kiểu toàn cầu

Tôi mới làm quen với React và tôi hiểu những lợi ích của các kiểu nội tuyến, dựa trên thành phần. Nhưng tôi tự hỏi liệu có cách nào hợp lý để có một số loại phong cách toàn cầu. Ví dụ: tôi muốn sử dụng cùng một màu Văn bản và Nút trong ứng dụng của mình.

Thay vì lặp lại trong mọi thành phần (và sau đó phải thay đổi nó ở x vị trí nếu cần), suy nghĩ ban đầu của tôi là tạo một lớp StyleSheet 'cơ sở' trong tệp riêng của nó và nhập nó vào các thành phần của tôi.

Có cách 'Phản ứng' tốt hơn hoặc nhiều hơn không?

Bạn có thể tạo một biểu định kiểu có thể sử dụng lại. Thí dụ:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

Trong thành phần của bạn:

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

...sau đó:

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

Tạo tệp cho kiểu của bạn (IE, Style.js).

Đây là một ví dụ:

import { StyleSheet } from 'react-native';

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

Trong bất kỳ tệp nào bạn muốn sử dụng kiểu của mình, hãy thêm thông tin sau:

import styles from './Style'

Nếu bạn chỉ muốn đặt một số biến toàn cục, bạn có thể thử.

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
    }
});

Bạn cũng có thể thử biểu định kiểu phản ứng gốc-mở rộng hỗ trợ các biến tạo kiểu chung:

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

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

Bạn phải tạo một tệp để lưu trữ tất cả kiểu trong đó như ' styles.js ' và viết mã loại css khi bạn cần

'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'
    }

});

và bây giờ bạn có thể sử dụng kiểu toàn cầu như bạn có thể thấy

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>
    );
  }
}

Hãy thử thư viện của tôi react-native-style-tachyons , không chỉ cung cấp cho bạn kiểu toàn cục mà còn là hệ thống bố cục đáp ứng, ưu tiên thiết kế với chiều rộng và chiều cao tương ứng với kích thước phông chữ gốc của bạn.

Tất cả các phương pháp này đều trực tiếp trả lời câu hỏi nhưng theo tôi, đó không phải là cách để thực hiện nó trong một hệ thống thiết kế dựa trên thành phần như React.

Chúng ta có thể bắt đầu với các thành phần nguyên tử, sau đó xếp lớp và nhóm chúng lên trên cùng. Bài viết sau đây có thể làm rõ ràng hơn phương pháp suy nghĩ này: http://atomicdesign.bradfrost.com/chapter-2/

Trong thế giới tự nhiên, các nguyên tố nguyên tử kết hợp với nhau tạo thành phân tử. Các phân tử này có thể kết hợp thêm để tạo thành các sinh vật tương đối phức tạp.

Nếu bạn cần một thành phần cơ sở không tồn tại, bạn tạo ra nó. Sau đó, bạn có thể tạo các thành phần khác, ít cụ thể hơn với nó. ví dụ:

// 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>
  )
}

Sau đó sử dụng CustomTextở mọi nơi thay vì Text. Bạn cũng có thể làm điều đó với View, div, spanhoặc bất cứ điều gì khác.

Tệp CSS bên ngoài main.css

'use strict';

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

module.exports = StyleSheet.create({

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

tạo phiên bản của tệp css trong thành phần.

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

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

Tại đây, bạn có thể tìm thấy một cách dễ dàng để sắp xếp các kiểu của mình và sau đó nhập vào các thành phần khác nhau, bạn có thể tạo một thư mục trong đó bạn tập hợp tất cả các tệp kiểu và tạo và index.js sẽ hoạt động như một mặt tiền:

index.js sẽ giống như sau:

import Variables from './variables';
import GlobalStyles from './global'; 

export { Variables, GlobalStyles };

và sau đó nhập như thế này:

import { GlobalStyles } from './stylesheets/index';

Tại đây để biết thêm thông tin:

https://thoughtbot.com/blog/osystem-for-styling-in-react-native

Hãy xem Chủ đề Shoutem cho React Native.

Đây là những gì bạn nhận được với Chủ đề Shoutem:

Kiểu toàn cục trong đó kiểu nhất định được tự động áp dụng cho thành phần theo tên kiểu của nó:

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

Kích hoạt kiểu cụ thể của thành phần nhất định với styleName(như lớp CSS):

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

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

Kế thừa kiểu tự động:

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>

Kiểu lồng nhau cho các thành phần đã cấu tạo:

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>
  );
}

Để làm cho nó hoạt động, bạn cần sử dụng StyleProvider, thành phần trình bao bọc cung cấp phong cách cho tất cả các thành phần khác thông qua ngữ cảnh. Tương tự với Redux StoreProvider.

Ngoài ra, bạn cần kết nối thành phần của mình với phong cách connectStyleđể bạn luôn sử dụng thành phần được kết nối. Tương tự với Redux connect.

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

Bạn có thể xem ví dụ trong tài liệu.

Một điều cuối cùng, chúng tôi cũng đã cung cấp một tập hợp các thành phần trong UI ToolKit của chúng tôi, những thành phần này đã được kết nối với kiểu, vì vậy bạn có thể chỉ cần nhập chúng và tạo kiểu theo phong cách / chủ đề chung của mình.