Простой стиль с React Native - PullRequest
Новая
       9

Простой стиль с React Native

0 голосов
/ 15 октября 2018

Я пытаюсь создать базовое приложение для навигации по страницам, но по какой-то причине мой реагирующий нативный код не включает стили.В представлении я четко заявляю, что он должен использовать 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',
   },
});

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Вы настраиваете 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',
   },
});
0 голосов
/ 15 октября 2018

Это может быть связано с опечаткой в ​​вашем коде: 

          <View stlye={styles.container}>
...