我在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: {

  // }
});

最佳答案

在线条样式中,改写样式表中存在的样式。

假设有一个样式组件:

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

关于css - 为什么我的内联样式有效,但是样式表根本没有更改代码?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57656071/

10-12 00:16
查看更多