样式不适用于 React Native 组件答案

【问题标题】：Styling not applied on React Native components样式不适用于 React Native 组件
【发布时间】：2021-01-23 07:55:57
【问题描述】：

我正在使用 React Native 创建我的第一个应用程序。从功能上讲，我的应用程序做了它应该做的事情，它显示了一些文本行，其中之一在按下它时会发生变化。问题是样式不适用 - 我没有收到任何错误，我导入了 StyleSheet。我在渲染方法中应用了我的样式；

//Header.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLoggedIn: false};
    }
    toggleUser = ()=>{
        this.setState(previousState => {
            return { isLoggedIn: !previousState.isLoggedIn }
        });
    }

    render() {
        let display = this.state.isLoggedIn ? 'Sample User' : this.props.message ;
        return (
            <View style={styles.headStyle}>
                <Text 
                    style={styles.headText}
                    onPress={this.toggleUser}>{display}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    headText: {
        textAlign: 'right',
        color: '#ffffff',
        fontSize: 20
    },
    headStyle: {
        paddingTop: 30,
        paddingBottom: 10,
        paddingRight: 10,
        backgroundColor: '#35605a'
    }
});

然后，我在 Home.js 中导入 Header.js，如下图：

//Home.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Header } from '../Sections/Header.js';

export class Home extends React.Component {
    render() {
        return (
            <View>
                <Text>This is the homepage</Text>
                <Text>I've made several lines</Text>
                <Text>This is text shown in the app</Text>
                <Header message = 'Press to login' />
            </View>
        );
    }
}

最后我在 App.js 中展示 Home 类，如下所示；

//App.js

import React from 'react';
import { Home } from './App/Views/Home.js';

export default class App extends React.Component {
  render() {
    return (
      <Home />
    );
  }
}

我被困在这里，不知道错误可能出在哪里，如果需要任何其他信息，请告诉我，我很乐意提供。

【问题讨论】：

没有一个应用？
是的，没有一个
我测试了你的代码，它可以工作。你可能需要重启 react-native server
试过了，但没有成功，我将创建一个新项目，希望它现在可以工作

标签： javascript reactjs react-native

【解决方案1】：

试试这样从 'react-native' 导入 { TouchableOpacity }

            <TouchableOpacity style={styles.headStyle}  onPress={this.toggleUser}>
                <Text 
                    style={styles.headText}
                    
                </Text>
            </TouchableOpacity>

【讨论】：

感谢您的回复，但仍然没有看到任何样式
我看到您将文本颜色设置为白色，颜色：'#ffffff'，并且您的主页组件背景默认也是白色
是的，但是文本是黑色的，没有应用任何样式。我尝试使用 expo 和 iOS 模拟器来预览代码。还有标题，应该有 #35605a 作为背景
同样将 Home 组件包裹在中，从 'react-native' 导入 { SafeAreaView }
我用 Home.js 中的替换了常规的，没有任何额外的样式 - 但不幸的是没有应用样式