使用 @observable 装饰的类型可以使字典和对象,数组等。
使用字典的例子:
export default class CustomChartStore implements ChartPropsInterface {
      @observable
      public selectedIndex: number;
      @observable
      public listData: any[];
      constructor(data: any[], index: number) {
            this.selectedIndex = index;
            this.listData = data;
      }
}
   constructor(props: any) {
            super(props);
              let arr: Array<any> = new Array<any>();
            for (let i = 0; i < 7; i++) {
                  arr.push({day:"4-21",date: "23.5",isSelected:false});
            }
//这里只是赋值为字典
            this.model = new ChartModel(arr,6);
            this.model.listData = arr;
            this.model.selectedIndex = props.selectedIndex;
                let item = this.model.listData[props.selectedIndex];
                item.isSelected = true;// 修改item -字典的值,触发render
      }
      render() {
            return (
                  <View style={{ flex: 1 }}>
                        <Text> 每日收益</Text>
                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-around", marginBottom: 0 }}>
                              {this.model.listData.map(this.renderItem)}
                        </View>
                  </View>
            );
      }
      onPress(index: number) {
            const lastIndex = this.model.selectedIndex;
            let item = this.model.listData[lastIndex];
            item.isSelected = false;
            this.model.selectedIndex = index;
            item = this.model.listData[index];
            item.isSelected = true;
      }
但是如果说对象里面嵌对象,就需要使用装饰器装饰最里面的对象。
例如:
// 这里只需要装饰`isSelected`
export class ChartItem {
      date:string;
      earning:string;
  @observable    isSelected:boolean;
      constructor(d:string,e:string,sel:boolean= false){
            this.date = d;
            this.isSelected=sel;
            this.earning = e;
      }
}
export interface ChartPropsInterface {
      selectedIndex:number;
      listData:ChartItem[];
}
export default class CustomChartStore implements ChartPropsInterface  {
public selectedIndex:number;
public listData:ChartItem[];
constructor(){
}
}
// other file2.tsx
   constructor(props: any) {
            super(props);
            this.model = new ChartModel();
            let arr: Array<ChartItem> = new Array<ChartItem>();
            for (let i = 0; i < 7; i++) {
                  arr.push(new ChartItem("4-21", "23.5"));
            }
            this.model.listData = arr;
            this.model.selectedIndex = props.selectedIndex;
                let item = this.model.listData[props.selectedIndex];
                item.isSelected = true;
      }
      render() {
            return (
                  <View style={{ flex: 1 }}>
                        <Text> 每日收益</Text>
                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-around", marginBottom: 0 }}>
                              {this.model.listData.map(this.renderItem)}
                        </View>
                  </View>
            );
      }
      onPress(index: number) {
            const lastIndex = this.model.selectedIndex;
            let item = this.model.listData[lastIndex];
            item.isSelected = false;
            this.model.selectedIndex = index;
            item = this.model.listData[index];
            item.isSelected = true;
      }
