Переключение с коренных иконок-реагентов для изменения собственных векторных значков при использовании прокручиваемого табулятора

Question

Так что настоящие коренные иконки больше не поддерживаются - и мне нужно переключиться на Инициативные векторные значки при использовании компонента Scrollable-Tab-View. Проблема заключается в том, что я получаю немного запутался, столкнувшись с этой ошибкой:

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

Вы можете установить родные реквизита стиль в соответствии со значением.

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}]}); 
    } 

Answer 2

решаемые его, перейдя в файл 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, 
      } 
     }); 
     } 
    }); 
    },