React-native изменяющийся стиль при перезагрузке

Я только изучаю React-native, но думаю, что понимаю самые основы, здесь у меня есть стиль, который применяет цвет к персонажу и значку (из шрифта, поэтому другой символ заключен в компонент).

Все работает идеально, когда я редактирую и сохраняю файл с описанием компонента, но при перезагрузке цвет из styles.countIcon теряется и становится черным.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import RideTimeIcon from './icons/RideTimeIcon';

export default class RiderCount extends React.Component {
  render() {
    return(
      <View style = {{flex: 1, flexDirection: 'row'}}>
        <Text style = {[
          {
            fontSize: this.props.fontSize ? this.props.fontSize : 24,
            fontWeight: 'bold',
            paddingRight: 3
          },
          styles.countIcon
        ]}>
          {this.props.count ? this.props.count : 0}
        </Text>
        <RideTimeIcon icon='person' size = {this.props.size} style = {styles.countIcon} />
      </View>
    );
  }
}

styles = StyleSheet.create({
  countIcon: {
    color: '#878787' //should be #656565 for black, 878787 white
  }
})

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

совершить, который сломал его, не касается компонента или даже его родителя. Для меня это просто не имеет никакого смысла. Вот что я использую и тестирую на устройстве Android и симуляторе с тем же результатом:

"expo": "^31.0.2",
"html-entities": "^1.2.1",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-action-button": "^2.8.5",
"react-native-webview-leaflet": "^4.0.4",
"react-navigation": "^2.18.2"
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 274
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После некоторых дополнительных поисков я обнаружил, что использовал

styles = StyleSheet.create(...)

вместо

const styles = StyleSheet.create(...).

Изменение его так, как должно быть, устраняет проблему.

как const имеет значение, я также наблюдаю ту же проблему.

Anil 30.06.2020 16:45

@Anil Я больше не разбирался в этом после того, как исправил. В связанном мною коммите я добавил еще один файл, в котором совершил ту же ошибку, и при перезагрузке файла он установил styles в глобальном пространстве имен, перезаписав тот, который был установлен ранее. const ограничивает объем styles, но я не понимаю, как, поскольку он определен вне класса / функции, поэтому, в моем понимании, он все равно будет глобальным, но я думаю, что это объясняется где-то в черном ящике JS ..

kachnitel 30.06.2020 21:55

Другие вопросы по теме