使用 React Native 进行简单的样式设置答案

【问题标题】：Simple Styling with React Native使用 React Native 进行简单的样式设置
【发布时间】：2018-10-15 08:55:25
【问题描述】：

我正在尝试创建一个导航页面的基本应用程序，但由于某种原因，我的反应本机代码不包括样式。在视图中，我明确指出它应该使用styles.container，但它没有响应。我尝试使用教程中的相同样式代码，但是每当我更改任何元素时，即使只是颜色，按钮也不会更改。当我有一个 Text 元素时，它仍然没有改变。我做错了什么？

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Expo from 'expo';
import { createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
          <View stlye={styles.container}>
              <Button
                  style={styles.container}
                  title="Go to the profile screen."
                  onPress = { () =>
                      navigate('Profile')
                  }
              />
          </View>
        );
    }
}


class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
            <View stlye={styles.container}>
                <Button
                    style={styles.container}
                    title="Go to the home screen."
                    onPress = { () =>
                        navigate('Home')
                    }
                />
            </View>
        );
    }
}

const NavigationApp = createStackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    }, {
    navigationOptions: {
        headerStyle: {
            marginTop: Expo.Constants.statusBarHeight
        }
    }
});

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

const styles = StyleSheet.create({
   container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
   },
});

【问题讨论】：

标签： reactjs react-native styling

【解决方案1】：

您正在设置stlye，而不是<View 中的style。

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Expo from 'expo';
import { createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
          <View style={styles.container}>
              <Button
                  style={styles.container}
                  title="Go to the profile screen."
                  onPress = { () =>
                      navigate('Profile')
                  }
              />
          </View>
        );
    }
}


class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <Button
                    style={styles.container}
                    title="Go to the home screen."
                    onPress = { () =>
                        navigate('Home')
                    }
                />
            </View>
        );
    }
}

const NavigationApp = createStackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    }, {
    navigationOptions: {
        headerStyle: {
            marginTop: Expo.Constants.statusBarHeight
        }
    }
});

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

const styles = StyleSheet.create({
   container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
   },
});

【讨论】：

【解决方案2】：

这可能是由于您的代码中的这个错字：

          <View stlye={styles.container}>

【讨论】：

我今天一直盯着代码看太多了...感谢您的收看！
没问题，会发生的。