Question

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

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

然后，我将Homeer.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 />
    );
  }
}

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

Answer 1

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

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

样式未应用于React Native组件

1 个答案: