Question

我试图创建一个导航页面的基本应用程序，但是由于某些原因，我的本机代码不包括样式。在视图中，我明确指出它应使用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',
   },
});

Answer 1

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

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

Answer 2

可能是由于您的代码中的这种错字造成的：

          <View stlye={styles.container}>

使用React Native的简单样式

2 个答案: