八、react-native的style记录

发表于 | 分类于
  1. 各个页面会有一些通用style,如何提取成通用的，供页面使用呢？
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    Button.component.style.js	内容如下：

    import {StyleSheet} from 'react-native';
    export default StyleSheet.create({
        container:{
            flexDirection:'row',
            paddingLeft: 10,
            paddingRight: 10,
            height: 64,
            alignItems:'center',
            borderBottomWidth: 1,
            borderBottomColor: '#D3D7D4'
        },
    	buttonText: {
    		fontSize: 20,
    		textAlign: 'center'
    	}
    })

Main.js使用该样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import styles from './Button.component.style.js';

export default class Button extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.buttonText}> Press Me! </Text>
      </View>
    );
  }
}

  1. 某个view的样式怎么做到混写？详细说就是：给某个样式添加了通用的style后，还需要添加该view独有的样式，代码如下？
    1
    <View style={[styles.tabs, {borderTopWidth: Constants.window.onePR}]}>