Question

我只是在学习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样式似乎就消失了。

破坏它的commit不会碰到组件，甚至不会碰到它的父组件。这对我根本没有任何意义。这是我使用的，并且在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"

Answer 1

经过一番摸索，我发现我已经使用过

styles = StyleSheet.create(...)

代替

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

更改它应该可以解决的问题。

重新加载时本机更改样式

1 个答案: