Question

我在React Native中编写一个导航栏。可以将其视为双层-上层是汉堡菜单，标题和搜索图标，第二层包含三个可触摸的标题，以导航到相关屏幕。

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

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

我的计划是编写单个导航栏，该导航栏分为两行（视图）：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的值，因为它具有较高的优先级，即使您将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
      }
});

为什么我的内联样式可以工作，但是样式表根本没有更改代码？

1 个答案: