css - 为什么我的内联样式有效，但我的样式表根本没有更改代码？

Question

我正在用 React Native 编写导航栏。将其视为双层 - 上层是汉堡菜单、标题和搜索图标，第二层由三个可触摸的标题组成，用于导航到相关屏幕。

a mock-up of the navbar I'm trying to create

当我应用内联样式时，它们起作用了。当我在那里执行 Stylesheet.create 和应用样式时，它们不会。我是编程新手，非常困惑。

我的计划是编写一个分成两行( View )的导航栏:navbarTop 和 navbarBottom。我非常希望能深入了解这样做是否有意义，以及如何解决我的样式问题。非常感谢大家!

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';

class Navbar extends Component {
  render() {
    return (
      <View style={styles.navbarTop}>
        <View>
          <TouchableHighlight
            onPress={() => { 
              this.props.navigation.openDrawer();
            }}
          >
            <Image
              style={{marginBottom: 5}}
              source={require('./../../../android/app/src/main/res/drawable/menu.png')}
            />
          </TouchableHighlight>
        </View>

        <View>
          <Text
            style={{
              fontWeight: 'bold',
              color: 'white',
              fontSize: 20,
              marginRight: 70
            }}
          >
            Dashboard
          </Text>
        </View>

        <View>
          <Image
            style={{marginBottom: 5}}
            source={require('./../../../android/app/src/main/res/drawable/search.png')}
          />  
        </View>

        <View style={styles.navbarBottom}>
          <View>
            <Text
              style={{
                color: 'white',
                fontSize: 15,
                marginRight: 70
              }}
            > RECORDINGS </Text>
          </View>

          <View>
            <Text
              style={{
                color: 'white',
                fontSize: 15,
                marginRight: 70
              }}
            > PATIENTS </Text>
          </View>

          <View>
            <Text
              style={{
                color: 'white',
                fontSize: 15,
                marginRight: 70
              }}
            > DEVICES </Text>
          </View>
        </View>
      </View>
    );
  }
}

export default withNavigation(Navbar);

const styles = StyleSheet.create({
  navbarTop: {
    backgroundColor: '#14172B',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  // navbarBottom: {

  // }
});

Answer 1

在线条样式中覆盖样式表中存在的样式。

假设有一个样式组件:

<View style = {[styles.demoView,{marginTop:50}]}/>


export default StyleSheet.create({
  demoView: {
    marginTop:20,
    flexDirection: "row",
    padding: "10rem",
    justifyContent: "space-between",
    alignItems: "center",
  },

在上面的样式中，内联样式将替换 marginTop 的值，因为它具有高优先级，即使您从样式表，因为它被内联样式抑制了。希望它能给你清晰的视野。 快乐编码:)

编辑:

    import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';

class Navbar extends Component {
  render() {
    return (
      <View style={styles.navbarTop}>
          <TouchableHighlight 
            onPress={() => { this.props.navigation.openDrawer()}}>
            <Image style={{marginBottom: 5}}
            source={require('./../../../android/app/src/main/res/drawable/menu.png')}
            />
          </TouchableHighlight>

          <Text style={{fontWeight: 'bold',color: 'white',fontSize: 20,marginRight: 70}}>
            Dashboard
          </Text>

          <Image
            style={{marginBottom: 5}}
            source={require('./../../../android/app/src/main/res/drawable/search.png')}
          />  

        <View style={styles.navbarBottom}>
            <Text style={styles.navBarText}> RECORDINGS </Text>
<Text style={styles.navBarText}> PATIENTS </Text>
<Text style={styles.navBarText}> DEVICES </Text>
          </View>
        </View>
    );
  }
}

export default withNavigation(Navbar);

const styles = StyleSheet.create({
  navbarTop: {
    backgroundColor: '#14172B',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  // navbarBottom: {

  // }
  navBarText:{
      color: 'white',
      fontSize: 15,
      marginRight: 70
      }
});