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

Я пытаюсь использовать реактивные элементы с моим приложением 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},
    },
  });

react-native react-native-elements
person Shibasis Sengupta    schedule 08.10.2019    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Судя по коду 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},
  },
});
person Thakur Karthik    schedule 08.10.2019
comment
Спасибо, я знал этот подход, есть ли способ параметризовать backgroundColor внутри 'stylesheet.create?' - person Shibasis Sengupta; 08.10.2019
comment
@ShibasisSengupta Вы можете экспортировать функцию, которая принимает параметры, такие как bg-color, и возвращает таблицу стилей. Пример: stackoverflow. ком/вопросы/42707327/ - person Sebastian Berglönn; 08.10.2019

arrow_upward
3
arrow_downward

Я могу предложить вам более чистый способ использования функций с таблицей стилей. Подход аналогичен предложению, данному в первой теме, но вместо использования глобальной таблицы стилей var мы будем использовать переменную только для нужного стиля:

  container: theme => ({
      flex: 1,
      backgroundColor: theme.colors.backgroundPrimary
   }),

И, на ваш взгляд, использование тоже довольно чистое:

<View style={styles.container(theme)}>

Тем не менее, оба решения работают как часы, выберите то, которое больше всего соответствует вашим потребностям :)

person tryp    schedule 21.01.2020

arrow_upward
0
arrow_downward

Внутри поставщика или дочерних элементов предоставленного компонента вы можете сделать что-то подобное, используя HOC:

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(theme).container}> // --> Here styles called as a function
      <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},
    }
});

export default withTheme(Header, styles);
person gildniy    schedule 28.06.2021