React Native中无需退出重入如何重启当前页面？

嘿，我看你遇到的问题是切换图表时想让页面直接回到首次加载的状态，不用挨个重置变量和处理渲染逻辑对吧？我帮你梳理下解决方案，结合你的代码来改：

核心思路是把全局数据和状态配置都收敛到组件内部，通过统一的重置方法让组件回到首次加载时的状态，不用退出场景。

1. 把模拟数据生成逻辑封装成组件方法 #

你现在的InsulinShort、InsulinLong、glocuseTests是组件外的全局变量，没法在重置时重新生成。我们把数据生成逻辑移到组件内部：

generateMockData() {
  const injectionsCount = 1000;
  let InsulinShort = [];
  let InsulinLong = [];
  let glocuseTests = [];

  // 生成血糖测试数据
  for (var i = 1; i < injectionsCount; i++) {
    var random = Math.random();
    if (random <= 0.7) {
      var gloguseValue = Math.floor(Math.random() * 40) + 75;
      var gloguseposition = Math.random();
      glocuseTests.push({x:i+gloguseposition, y: gloguseValue, marker: "level: "+gloguseValue});
    }
  }

  // 生成胰岛素数据
  for (var i = 1; i < injectionsCount; i++) {
    var random = Math.random();
    if (random <= 0.15) {
      var shortvalue = Math.floor(Math.random() * 16) + 1 ;
      var shortPosition = Math.round(Math.random() * 100) / 100;
      InsulinShort.push({x:i+shortPosition,y: shortvalue*20, marker: shortvalue+ " units of short insulin"});
    } else if (random <= 0.3) {
      var longePosition = Math.round(Math.random() * 10) / 10;
      var longvalue = Math.floor(Math.random() * 16) + 1;
      InsulinLong.push({x:i+longePosition,y: longvalue*20, marker: longvalue+ " units of long insulin"});
    }
  }

  return { InsulinShort, InsulinLong, glocuseTests };
}

2. 提取初始状态配置为常量（避免重复代码） #

把图表的legend、xAxis等固定配置提取成组件外的常量，方便构造函数和重置方法复用：

// 组件外部定义初始配置常量
const INITIAL_LEGEND = {
  enabled: true,
  textSize: 18,
  form: 'SQUARE',
  formSize: 18,
  xEntrySpace: 10,
  yEntrySpace: 5,
  formToTextSpace: 5,
  wordWrapEnabled: true,
  maxSizePercent: 0.5
};

const INITIAL_X_AXIS = {
  valueFormatter: [
    '01/04/18', '02/04/18', '03/04/18', '04/04/18', '05/04/18',
    '06/04/18', '07/04/18', '08/04/18', '09/04/18', '10/04/18',
    '11/04/18', '12/04/18', '13/04/18', '14/04/18', '15/04/18',
    '16/04/18', '17/04/18', '18/04/18', '19/04/18', '20/04/18',
  ],
  textColor: processColor('#000'),
  gridColor: processColor('#000'),
  axisLineColor: processColor('#000'),
  drawGridLines:true,
  drawAxisLine:false,
  drawLabels:true,
  granularityEnabled: true,
  granularity: 1,
  position:'TOP',
  textSize: 10,
  labelRotationAngle:45,
  gridLineWidth: 1,
  axisLineWidth: 2,
  gridDashedLine: { lineLength: 10, spaceLength: 10 },
  centerAxisLabels:false,
};

const INITIAL_Y_AXIS = {
  left: {
    axisMinimum: 0,
    axisMaximum: 400,
    labelCount: 6,
    labelCountForce: true,
    granularityEnabled: true,
    granularity: 5,
  },
  right: {
    axisMinimum: 0,
    axisMaximum: 20,
    labelCount: 6,
    labelCountForce: true,
    granularityEnabled: true,
    granularity: 5,
  }
};

const INITIAL_MARKER = {
  enabled: true,
  markerColor: processColor('#F0C0FF8C'),
  textColor: processColor('white'),
  markerFontSize: 18,
};

3. 修改构造函数，初始化时调用数据生成方法 #

把原来的全局变量替换成组件方法的返回值，用提取的常量初始化状态：

constructor() {
  super();
  const { InsulinShort, InsulinLong, glocuseTests } = this.generateMockData();
  
  this.state = {
    selectedPeriod: "all",
    loading: true,
    days:365,
    legend: INITIAL_LEGEND,
    xAxis: INITIAL_X_AXIS,
    yAxis: INITIAL_Y_AXIS,
    marker: INITIAL_MARKER,
    data: {
      barData: {
        config: { barWidth: 1 / 24 },
        dataSets: [{
          values: InsulinLong,
          label: 'Long Insulin',
          config: { drawValues: false, colors: [processColor('#a2a4b2')] }
        },{
          values: InsulinShort,
          label: 'Short Insulin',
          config: { barShadowColor: processColor('red'), highlightAlpha: 200, drawValues: false, colors: [processColor('#d0d5de')] }
        }]
      },
      lineData: {
        dataSets: [{
          values: glocuseTests,
          label: 'Glucose Level',
          config: { drawValues: false, colors: [processColor('#0090ff')], drawCircles: true, lineWidth: 3 }
        }]
      }
    }
  };
}

4. 实现完整的重置方法resetscreen #

这个方法会重新生成模拟数据，并将组件状态完全重置到初始状态，触发图表重新渲染：

resetscreen() {
  const { InsulinShort, InsulinLong, glocuseTests } = this.generateMockData();
  
  this.setState({
    selectedPeriod: "all",
    loading: true,
    days:365,
    legend: INITIAL_LEGEND,
    xAxis: INITIAL_X_AXIS,
    yAxis: INITIAL_Y_AXIS,
    marker: INITIAL_MARKER,
    data: {
      barData: {
        config: { barWidth: 1 / 24 },
        dataSets: [{
          values: InsulinLong,
          label: 'Long Insulin',
          config: { drawValues: false, colors: [processColor('#a2a4b2')] }
        },{
          values: InsulinShort,
          label: 'Short Insulin',
          config: { barShadowColor: processColor('red'), highlightAlpha: 200, drawValues: false, colors: [processColor('#d0d5de')] }
        }]
      },
      lineData: {
        dataSets: [{
          values: glocuseTests,
          label: 'Glucose Level',
          config: { drawValues: false, colors: [processColor('#0090ff')], drawCircles: true, lineWidth: 3 }
        }]
      }
    }
  });
}

这样一来，当你切换图表时调用resetscreen，组件就会重新生成所有模拟数据，状态也回到首次加载时的样子，图表会自动重新渲染，完全不用退出再进入场景。

内容的提问来源于stack exchange，提问作者Chief Madog