樣式不適用於 React Native 組件

Question

我正在用 React Native 創建我的第一個應用程序。 從功能上講，我的應用程序做了它應該做的事情，它顯示了一些文本行，其中一個在按下它時會發生變化。 問題是樣式不適用 - 我沒有收到任何錯誤並且我導入了樣式表。 我在渲染方法中應用了我的樣式；

//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 class，如下所示；

//App.js

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

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

我被困在這里，不知道錯誤在哪里，如果需要任何其他信息，請告訴我，我很樂意提供。

Answer 1

嘗試這樣從'react-native'導入{TouchableOpacity}

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