Реагируйте на собственные элементы с помощью Stylesheet.create - PullRequest
Новая
       17

Реагируйте на собственные элементы с помощью Stylesheet.create

0 голосов
/ 08 октября 2019

Я пытаюсь использоватьact-native-elements с моим приложением React-Native.

У меня есть центральный файл js с деталями темы, которые вводятся с использованием ThemeProvider, как описано здесь - https://react -native-elements.github.io / react-native-elements / docs / customization.html

Однако, когда я пытаюсь использовать переданную тему в методе stylesheet.create компонента, яполучаю ошибку. Что я делаю неправильно? - 

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Text, withTheme} from 'react-native-elements';

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    width: '100%',
    backgroundColor: theme.container.backgroundColor,//**** Getting error here stating that theme is not defined
    shadowRadius: 1.5,
    elevation: 2,
    shadowColor: 'rgb(0,0,0)',
    shadowOpacity: 0.4,
    shadowOffset: {width: 0, height: 2.5},
  },
});

export default withTheme(Header);

Пожалуйста, дайте мне знать, если я смогу предоставить дополнительную информацию.

Благодаря предложению, приведенному ниже @Sebastian Berglönn, я мог его параметризовать, не экспортируя в другой файл, выполнивэто - 

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles(theme).container}>
      <Text>Home</Text>
    </View>
  );
};
const styles = theme =>
  StyleSheet.create({
    container: {
      width: '100%',
      backgroundColor: theme.container.backgroundColor,
      shadowRadius: 1.5,
      elevation: 2,
      shadowColor: 'rgb(0,0,0)',
      shadowOpacity: 0.4,
      shadowOffset: {width: 0, height: 2.5},
    },
  });

1 Ответ

2 голосов
/ 08 октября 2019

При взгляде код theme определен внутри компонента заголовка, поэтому он показывает, что тема не определена.

Чтобы применить backgroundColor из темы, вы можете сделать следующее: 

const Header = props => {
  const {theme} = props;

  return (
    <View style={[styles.container,{backgroundColor: theme.container.backgroundColor}]}>
      <Text>Home</Text>
    </View>
  );
};

и не забудьте удалить backgroundColor из таблицы стилей. 

const styles = StyleSheet.create({
  container: {
    width: '100%',
    //backgroundColor: theme.container.backgroundColor,
    shadowRadius: 1.5,
    elevation: 2,
    shadowColor: 'rgb(0,0,0)',
    shadowOpacity: 0.4,
    shadowOffset: {width: 0, height: 2.5},
  },
});
...