反应原生导航和动画无法正常运行

Question

我正在尝试在react-native-navigation中为图标设置动画。动画无效，图标始终具有0的不透明度。

这是我的代码：

const Tab = createBottomTabNavigator();

export interface Props {}
export interface States {
    opacity: Animated.Value;
}

export default class Navigation extends Component<Props, States> {
    constructor(props) {
        super(props);
        this.state = {
            opacity: new Animated.Value(0),
        };
    }

    getOptions(title: string, icon, stylesOnActive: Object = {}): Object {
        return {
            title: title,
            tabBarIcon: ({ color, focused }) => {
                return (
                    <Animated.View style={focuses && stylesOnActive}>
                        <FontAwesomeIcon icon={icon} color={color} />
                    </Animated.View>
                );
            },
        };
    }

    changeState() {
        Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 2000,
            useNativeDriver: true,
        }).start();
    }

    render() {
        const self = this;
        const styles = {
            opacity: this.state.opacity,
        };

        return (
            <NavigationContainer onStateChange={() => self.changeState()}>
                <Tab.Navigator
                    initialRouteName={Screens.Home}
                    backBehavior="history"
                >
                    <Tab.Screen
                        name={Screens.Home}
                        component={Components.Home}
                        options={this.getOptions("First", faAd, styles)}
                    />
                    <Tab.Screen
                        name={Screens.Settings}
                        component={Components.Settings}
                        options={this.getOptions("Second", faCoffee, styles)}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        );
    }
}