React-Native 中的样式 ActivityIndi​​cator

Question

我正在尝试设置color我的ActivityIndicator：

 <View style={[{height: this.props.calendarHeight}, this.style.placeholder]}>
      <ActivityIndicator size="large" color={this.style.loadingSpinner.color} />
    </View>

我在这里设置我的风格：

   import React, {Component} from 'react';
import {Text, View, ActivityIndicator} from 'react-native';
import Calendar from '../calendar';
import styleConstructor from './style';

class CalendarListItem extends Component {
  constructor(props) {
    super(props);
    this.style = styleConstructor(props.theme);
  }

  shouldComponentUpdate(nextProps) {
    const r1 = this.props.item;
    const r2 = nextProps.item;
    return r1.toString('yyyy MM') !== r2.toString('yyyy MM') || !!(r2.propbump && r2.propbump !== r1.propbump);
  }

  render() {
    const row = this.props.item;
    if (row.getTime) {
      return (
        <Calendar
          theme={this.props.theme}
          style={[{height: this.props.calendarHeight}, this.style.calendar]}
          current={row}
          hideArrows
          hideExtraDays={this.props.hideExtraDays === undefined ? true : this.props.hideExtraDays}
          disableMonthChange
          markedDates={this.props.markedDates}
          markingType={this.props.markingType}
          hideDayNames={this.props.hideDayNames}
          onDayPress={this.props.onDayPress}
          minDate={this.props.minDate}
          maxDate={this.props.maxDate}
          firstDay={this.props.firstDay}
          monthFormat={this.props.monthFormat}
          dayComponent={this.props.dayComponent}
          disabledByDefault={this.props.disabledByDefault}
          showWeekNumbers={this.props.showWeekNumbers}
        />);
    } else {
      const text = row.toString();
      return (

        <View style={[{height: this.props.calendarHeight}, this.style.placeholder]}>
          <ActivityIndicator size="large" color={this.style.loadingSpinner} />
        </View>
      );
    }
  }
}

export default CalendarListItem;

我的style.js是：

import {StyleSheet} from 'react-native';
import * as defaultStyle from '../style';

const STYLESHEET_ID = 'stylesheet.calendar-list.main';

export default function getStyle(theme={}) {
  const appStyle = {...defaultStyle, ...theme};
  return StyleSheet.create({
    container: {
      backgroundColor: appStyle.calendarBackground
    },
    placeholder: {
      backgroundColor: appStyle.calendarBackground,
      alignItems: 'center',
      justifyContent: 'center'
    },
    placeholderText: {
      fontSize: 30,
      fontWeight: '200',
      color: appStyle.dayTextColor
    },
    loadingSpinner: {
      color: '#fff'
    },
    calendar: {
      paddingLeft: 15,
      paddingRight: 15
    },
    ...(theme[STYLESHEET_ID] || {})
  });
}

然而，this.style.loadingSpinner.color是未定义的。

怎样才能设置颜色呢？

Answer 1

使用CSS变换将使图标变大

<ActivityIndicator size="large" style={{ transform: [{ scaleX: 2 }, { scaleY: 2 }] }} color="#E85F5C" />

Answer 2

要设置 ActivityIndi​​cator 组件的颜色，只需将 prop color 设置为您想要的颜色即可，如下所示

<ActivityIndicator color={colors.yourColor} /> // if you have an object with your colors

或者

<ActivityIndicator color='#000' /> 

您还可以使用 prop size 更改此组件的大小

<ActivityIndicator size='small' /> // you can set 'small' or 'large'

记得从“react-native”导入 ActivityIndi​​cator