Question

因此不再支持React Native Icons - 我需要在使用Scrollable-Tab-View组件时切换到React Native Vector Icons。问题是我遇到这个错误时会有点困惑：

You are setting the style `{ opacity: ... }` as a prop. 
You should nest it in a style object.
E.g. `{ style: { opacity: ... } }` reactConsoleError 
  @ ExceptionsManager.js:78console.error 
  @ YellowBox.js:49warnForStyleProps 
  @ NativeMethodsMixin.js:41NativeMethodsMixin.setNativeProps 
  @ NativeMethodsMixin.js:116React.createClass.setNativeProps 
  @ create-icon-set.js:56(anonymous function) 
  @ menuTabBar.js:78module.exports.React.createClass.setAnimationValue 
  @ menuTabBar.js:70_updateValue 
  @ AnimatedImplementation.js:665setValue 
  @ AnimatedImplementation.js:557React.createClass._updateScrollValue 
  @ index.js:154React.createElement.onScroll 
  @ index.js:97ScrollResponderMixin.scrollResponderHandleScroll 
  @ ScrollResponder.js:259React.createClass.handleScroll 
  @ ScrollView.js:366invokeGuardedCallback 
  @ ReactErrorUtils.js:27executeDispatch 
  @ EventPluginUtils.js:98executeDispatchesInOrder 
  @ EventPluginUtils.js:121executeDispatchesAndRelease 
  @ EventPluginHub.js:43executeDispatchesAndReleaseTopLevel 
  @ EventPluginHub.js:54forEachAccumulated 
  @ forEachAccumulated.js:25EventPluginHub.processEventQueue 
  @ EventPluginHub.js:287runEventQueueInBatch 
  @ ReactEventEmitterMixin.js:18ReactEventEmitterMixin.handleTopLevel 
  @ ReactEventEmitterMixin.js:45merge._receiveRootNodeIDEvent 
  @ ReactNativeEventEmitter.js:120merge.receiveEvent 
  @ ReactNativeEventEmitter.js:142__callFunction 
  @ MessageQueue.js:159(anonymous function) 
  @ MessageQueue.js:85guard 
  @ MessageQueue.js:39callFunctionReturnFlushedQueue 
  @ MessageQueue.js:84messageHandlers.executeJSCall 
  @ debuggerWorker.js:25onmessage 
  @ debuggerWorker.js:42

这是我的代码：

'use strict';

var React = require('react-native');
var { StyleSheet, Text, View, TouchableOpacity, Animated } = React;

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');

var Icon = require('react-native-vector-icons/Ionicons');

var styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 5,
  },
  tabs: {
    height: window.height/14,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.05)',
    backgroundColor:'#1a1a1a',
  },
  icon: {
    width: 25,
    height: 25,
    position: 'absolute',
    top: 0,
    left: 20,
  },
});

module.exports = React.createClass({
  selectedTabIcons: [],
  unselectedTabIcons: [],

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array
  },

  renderTabOption: function(name, page) {
    var isTabActive = this.props.activeTab === page;

    return (
      <TouchableOpacity key={name} onPress={() => this.props.goToPage(page)} style={[styles.tab]}>
        <Icon name={name} size={25} color='#DD2A2A' style={styles.icon}
              ref={(icon) => { this.selectedTabIcons[page] = icon }}/>
        <Icon name={name} size={25} color='#436675' style={styles.icon}
              ref={(icon) => { this.unselectedTabIcons[page] = icon }}/>
      </TouchableOpacity>
    );
  },

  componentDidMount: function() {
    this.setAnimationValue({value: this.props.activeTab});
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
  },

  setAnimationValue: function({value}) {
    var currentPage = this.props.activeTab;

    this.unselectedTabIcons.forEach((icon, i) => {
      var iconRef = icon;

      if (!icon.setNativeProps && icon !== null) {
        iconRef = icon.refs.icon_image
      }

      if (value - i >= 0 && value - i <= 1) {
        iconRef.setNativeProps({opacity: value - i});
      }
      if (i - value >= 0 &&  i - value <= 1) {
        iconRef.setNativeProps({opacity: i - value});
      }
    });
  },

  render: function() {
    var containerWidth = this.props.containerWidth;
    var numberOfTabs = this.props.tabs.length;
    var tabUnderlineStyle = {
      position: 'absolute',
      width: containerWidth / numberOfTabs,
      height: 2,
      backgroundColor: '#DD2A2A',
      bottom: 0,
    };

    var left = this.props.scrollValue.interpolate({
      inputRange: [0, 1], outputRange: [0, containerWidth / numberOfTabs]
    });

    return (
      <View>
        <View style={styles.tabs}>
          {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        </View>
        <Animated.View style={[tabUnderlineStyle, {left}]} />
      </View>
    );
  },
  border: function(color) {
      return {
        borderColor: color,
        borderWidth: 1,
      }
  },
});

具体来说，这里是讨论这个部分：

componentDidMount: function() {
    this.setAnimationValue({value: this.props.activeTab});
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
  },

  setAnimationValue: function({value}) {
    var currentPage = this.props.activeTab;

    this.unselectedTabIcons.forEach((icon, i) => {
      var iconRef = icon;

      if (!icon.setNativeProps && icon !== null) {
        iconRef = icon.refs.icon_image
      }

      if (value - i >= 0 && value - i <= 1) {
        iconRef.setNativeProps({opacity: value - i});
      }
      if (i - value >= 0 &&  i - value <= 1) {
        iconRef.setNativeProps({opacity: i - value});
      }
    });
  },

选择图标时会创建图标高亮显示动画。我理解错误的要求，但我不确定如何实现它，以便不透明度不是道具。非常感谢帮助！

Answer 1

通过转到menuTabBar文件（上面的代码来自）并将相关部分更改为以下内容解决了这个问题：

setAnimationValue: function({value}) {
    var currentPage = this.props.activeTab;

    this.unselectedTabIcons.forEach((icon, i) => {
      var iconRef = icon;

      if (!icon.setNativeProps && icon !== null) {
        iconRef = icon.refs.icon_image
      }

      if (value - i >= 0 && value - i <= 1) {
        iconRef.setNativeProps({
          style: {
            opacity: value - i, 
          }
        });
      }
      if (i - value >= 0 &&  i - value <= 1) {
        iconRef.setNativeProps({
          style: {
            opacity: i - value,
          }
        });
      }
    });
  },

Answer 2

您可以根据值设置本机样式道具。

  if (value - i >= 0 && value - i <= 1) {
    iconRef.setNativeProps({style: [styles.icon,{opacity: value - i}]});
  }
  if (i - value >= 0 &&  i - value <= 1) {
    iconRef.setNativeProps({style: [styles.icon,{opacity: i - value}]});
  }

使用Scrollable Tab视图时，从React Native图标切换到React Native Vector图标

2 个答案: