首页 > 解决方案 > React Native Reload Screen A In Back 动作

问题描述

我有 ScreenA 要单击 Next ScreenB 然后回到屏幕 A 不调用函数 componentWillMount()

ScreenA -> Next -> ScreenB -> Back() -> ScreenA

如何在返回操作中重新加载路由屏幕

类屏幕A

import React from "react";
import { Button, Text, View } from "react-native";

class ScreenA extends Component {
  constructor(props){
    super(props)
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        })
      }
  }

  componentWillMount() {
        fetch(MYCLASS.DEMAND_LIST_URL, {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
                },                    
                body: JSON.stringify({
                  userId:'17'})
            })
            .then((response) => response.json())
            .then((responseData) => {
              if (responseData.status == '1') {
                var data =  responseData.data
                this.setState({                  
                  dataSource: this.state.dataSource.cloneWithRows(data),
                });
              }
            })
            .done();
      }


  onPress = () => {
    this.props.navigate("ViewB");
  };

  render() {
    return (
      <View>
        <Text>test</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

类屏幕B

从“react”导入 React 从“react-native”导入 { Button }


class ScreenB extends Component {
  
   render() {
    const {goBack} = this.props.navigation;

    return( 
          <Button title="back" onPress={goBack()} /> 
         )
   }
}    

标签: iosiphonereact-native

解决方案


类屏幕A

import React from "react";
import { Button, Text, View } from "react-native";

class ScreenA extends Component {
  constructor(props){
    super(props)
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        })
      }
  }

  componentWillMount() {
    this.getData()
  }

  getData() {
        fetch(MYCLASS.DEMAND_LIST_URL, {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
                },                    
                body: JSON.stringify({
                  userId:'17'})
            })
            .then((response) => response.json())
            .then((responseData) => {
              if (responseData.status == '1') {
                var data =  responseData.data
                this.setState({                  
                  dataSource: this.state.dataSource.cloneWithRows(data),
                });
              }
            })
            .done();
      }


  onPress = () => {
    this.props.navigate("ViewB", { onSelect: this.onSelect, getData: () => this.getData() });
  };

  render() {
    return (
      <View>
        <Text>test</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

类屏幕B

class ScreenB extends Component {
   componentWillUnmount() {
     this.props.navigation.state.params.getData()
   }

   render() {
    const {goBack} = this.props.navigation;

    return( 
          <Button title="back" onPress={goBack()} /> 
         )
   }
}

推荐阅读