ตอบสนองสไตล์ส่วนกลางแบบเนทีฟ

ฉันใหม่กับ 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
    }
});

นอกจากนี้คุณยังสามารถลองใช้สไตล์ชีทแบบตอบสนองเนทีฟ - ขยายที่รองรับตัวแปรสไตล์ส่วนกลาง:

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

ลองใช้ไลบรารีของฉันตอบสนอง - เนทีฟสไตล์ 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หรือสิ่งอื่นใด

ไฟล์ 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>

ที่นี่คุณสามารถค้นหาวิธีที่สวยงามในการจัดเรียงสไตล์ของคุณจากนั้นนำเข้าสู่ส่วนประกอบต่างๆคุณสามารถสร้างโฟลเดอร์ที่คุณรวบรวมไฟล์สไตล์ทั้งหมดและสร้างและ index.js ซึ่งจะทำงานเป็นส่วนหน้า:

index.js จะมีลักษณะดังนี้:

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

export { Variables, GlobalStyles };

จากนั้นนำเข้าดังนี้:

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

สำหรับข้อมูลเพิ่มเติมที่นี่:

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

ฉันทำงานของฉันโดยใช้สิ่งที่คล้ายกัน

สร้างไดเร็กทอรีชื่อ 'ค่าคงที่' สร้างไฟล์ใน. /constants/AppStyles.js

 /**
 * Project level stylesheet for common styles
 */


import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    margin: 20,
    alignItems: 'center',
    alignContent: 'center',
    paddingVertical: 60
  }
  
});

จากนั้นใน App.js อ้างอิงไฟล์นี้และสไตล์ที่สร้างขึ้น

import React from 'react';
import {
  View,
  Text
} from 'react-native';
import AppStyles from './constants/AppStyles';

const App = () => {
  return (
    <View style={ AppStyles.container }>
      <Text>MOST BASIC Template EVER!</Text>
    </View>
  );
};

export default App;

กับดักที่ฉันตกลงไป

• ฉันมีวงเล็บปีกกาในการนำเข้า {AppStyles} จาก "./constants/AppStyles"; ไม่ถูกต้อง :-(
• ฉันสร้าง AppStyles เป็นส่วนประกอบและลองส่งออก const ผิด :-)

พบหลักสูตรออนไลน์ที่ดีและหาได้จากที่นั่น

ดูธีม Shoutemสำหรับ React Native

นี่คือสิ่งที่คุณจะได้รับจากธีม Shoutem:

สไตล์ส่วนกลางที่สไตล์บางอย่างถูกนำไปใช้กับส่วนประกอบโดยอัตโนมัติตามชื่อสไตล์:

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

การเปิดใช้งานสไตล์เฉพาะขององค์ประกอบบางอย่างด้วยstyleName(เช่นคลาส CSS):

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

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

การสืบทอดรูปแบบอัตโนมัติ:

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>

รูปแบบที่ซ้อนกันสำหรับส่วนประกอบประกอบ:

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

เพื่อให้มันใช้งานได้คุณต้องใช้StyleProviderคอมโพเนนต์ Wrapper ซึ่งให้สไตล์กับส่วนประกอบอื่น ๆ ทั้งหมดผ่านบริบท คล้ายกับ StoreProviderRedux

นอกจากนี้คุณต้องเชื่อมต่อส่วนประกอบของคุณกับสไตล์ด้วยconnectStyleดังนั้นคุณจึงใช้ส่วนประกอบที่เชื่อมต่ออยู่เสมอ คล้ายกับ connectRedux

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

คุณสามารถดูตัวอย่างได้ในเอกสารประกอบ

สิ่งสุดท้ายคือเราได้จัดเตรียมชุดส่วนประกอบในUI ToolKitของเราซึ่งเชื่อมต่อกับสไตล์แล้วดังนั้นคุณสามารถนำเข้าและจัดรูปแบบในสไตล์ / ธีมทั่วโลกของคุณได้