如何从自定义反应导航标题组件访问父状态值

时间:2019-05-10 10:38:51

标签: react-native react-navigation

这个问题与此类似 Access state values from parent using react native navigation

除了链接的问题中,它使用的是默认的react navigation header配置,我使用的是自定义的。

/* set up XMLHttpRequest */
var url = "Test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(e) {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, {type:"binary"});

  /* DO SOMETHING WITH workbook HERE */
  var first_sheet_name = workbook.SheetNames[0];
  /* Get worksheet */
  var worksheet = workbook.Sheets[first_sheet_name];
  var test = XLSX.utils.sheet_to_json(worksheet,{raw:true})
  console.log(test)
}

oReq.send();

console.log(test) //I can not access it here..

父级包含一个列表,并且我的自定义标题组件中有一个按钮,当我按下它时,我希望它能够更新列表中的数据。这意味着我的自定义标头组件需要访问父状态值。

我不确定如何使用我的自定义组件标题执行此操作。

1 个答案:

答案 0 :(得分:0)

您可以执行与the answer from the question you mentioned相同的操作,只是传递所需的道具

class YourComponent extends Component {
  componentDidMount(){
    this.props.navigation.setParams({
      yourFuntion: this._yourfunction,
    })
  }

  yourfunction = () => {
    // handle thing with state here
  }
}

navigationOptions: ({ navigation }) => {
        const yourFuntion = navigation.getParam("yourFuntion", ()=>{});
        headerTitle: <MyCustomHeader yourFuntion={yourFuntion}/>, //pass what you want in prop
        headerStyle: { //applies to the View
            backgroundColor: colors.darkThemeBackground,
        },
        headerTintColor: colors.whiteText,
    };

我不确定这是否是您想要的,但是我从您的问题中了解到的是,您想在组件中获取一个prop并将其传递给您的自定义标头,所以像其他问题一样做,但是通过道具传递