Question

我是React世界的新手

我有2个屏幕：“股票”和“条形码”。在库存中，我导航到条形码的屏幕。当我扫描条形码时，我返回上一个屏幕，我想用条形码设置输入文本并调用一个函数。在我的示例joinData（）;

问题是设置输入文本并调用函数。我尝试了示例和答案，但是我找不到或不知道该怎么做。

我在componentDidUpdate（）中尝试了一些操作，但失败了永久违反：超过最大更新深度

Stock.js

import React, {useState} from "react";
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View,     Alert, TouchableOpacity, TextInput } from 'react-native';

//galio
import { Block, Text, theme } from "galio-framework";

import { Button, Icon, Input } from "../components/";

export default class Stock extends React.Component {
constructor(props) {  
super(props);
this.myRef = React.createRef();
this.array = [];
this.state = {
  arrayHolder: [],
  Input_ITMREF: ''
};
}

// I tried this but it fails 
componentDidUpdate() {
if (this.props.navigation.getParam('itmref') != 'undefined') {
  this.setState({ Input_ITMREF: this.props.navigation.getParam('itmref')});
}
}

componentDidMount() {
  this.setState({ arrayHolder: [...this.array] }) // Rafraîchit la liste
}

joinData = () => {
    vxml = this.state.Input_ITMREF+" I do something";
}

Render() {

return (

  <Block flex>
    <Block row space="evenly">
      <Block center>
        <Input 
          placeholder='Code article'
          onChangeText={data => this.setState({ Input_ITMREF: data })}
          ref={this.myRef}
        />
      </Block>
    </Block>
    <Block center>
        <Button style={styles.button} onPress={() => this.props.navigation.navigate('Barcode')}>Barcode</Button>
        <Text style={{ margin: 10 }}>Post: {this.props.navigation.getParam('itmref')}</Text>
    </Block>
  </Block>
    );
  }
}

和Barcode.js

import React, {} from 'react';
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View, Alert, TouchableOpacity, TextInput } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Button } from "../components/";

export default class Barcode extends React.Component {
   static navigationOptions = {
     header: null //hide the header bar
   };

   handleBarCodeScanned = ({ type, data }) => {
    this.props.navigation.navigate("Stock", {
      itmref: data
    });
  };

  render() {
    return (
       <BarCodeScanner
            onBarCodeScanned={this.handleBarCodeScanned}
            style={styles.barcodeScanner}
          />
    );
  }
}

Answer 1

您可以将状态处理程序函数作为prop传递给条形码屏幕，并使用该函数为状态中的textInput设置值。库存（状态）

state = {
   inputValue: ''
}
....
const setInputTextValue= (newValue) => {
   this.setState({
   inputValue: newValue
})

您将此功能作为道具传递给Barcode场景，并在需要设置新值时考虑到Stock场景，调用它。

更新：What is the proper way to update a previous StackNavigator screen?

我刚刚看到的另一个解决方案：Updating State of Another Screen in React Navigation

Answer 2

从条形码页返回到stockPage时，您需要使用WillFocus方法（react-navigation中包含）

componentDidMount(){
    console.log("willFocus runs") initial start

    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs") // calling it here to make sure it is logged at every time screen is focused after initial start
    });
}

有关更多信息，请阅读此文档 https://reactnavigation.org/docs/function-after-focusing-screen/

返回上一个屏幕时反应调用功能和setstate

2 个答案: