在 MST 中为 Animated.Value、setInterval、require('image.png') 使用哪些类型？答案

【问题标题】：What types to use in MST for Animated.Value, setInterval, require('image.png')?在 MST 中为 Animated.Value、setInterval、require('image.png') 使用哪些类型？
【发布时间】：2019-11-08 09:34:48
【问题描述】：

我正在使用带有 MST 的本机反应，但我无法解决下一个问题在 MST 中为 new Animated.Value(1)、setInterval、require('image.png') 使用哪些类型？试过 string、frozen 没有帮助。

import {Animated} from 'react-native';
import {types} from 'mobx-state-tree';

const Worksheet = types
  .model('Worksheet', {
    image: _,
    animated: _,
    timeInterval: _, 
  })

Worksheet.create({
  image: require('image.png'),
  animated: new Animated.Value(1),
  timeInterval: null | setInterval(() => {}, 1000),  
})

需要你的帮助。谢谢！

【问题讨论】：

标签： javascript react-native mobx mobx-react mobx-state-tree

【解决方案1】：

一个选项可能是：

const Worksheet = types
  .model('Worksheet', {
    imageFile: types.string,
    animatedValue: 1,
  ).views(self => ({
    get image() {
      return require(self.imageFile);
    },
    get animated() {
      return new Animated.Value(self.animatedValue);
    },
  }).volatile({
    timeInterval: null || setInterval(() => {}, 1000)
  })

当 MST 无法推理时，并非所有字段都可以是类型。这就是volatile 发挥作用的地方。请注意，volatile 内的字段不能序列化为快照。

我不确定你对animated 的意图是什么，所以我将值作为它自己的类型，并在views 中使用了一个计算的getter 来获得你想要的实际东西。也许这会激发您的灵感。

【讨论】：