Android后退按鈕處理本機反應

Question

我在屏幕A上有一個下拉菜單，其中設置了默認狀態。 當我從下拉列表中選擇新值時，狀態會更新並移動到新屏幕，並根據上一屏幕中更新的新狀態獲取數據。 現在在我的新屏幕中，我在屏幕標題中獲得了返回按鈕 ，並且還有我的android設備的后退按鈕。

當我單擊android后退按鈕或標題后退按鈕時，它會返回到上一屏幕（默認功能）。 我要添加到它的內容是當它返回上一屏幕時，它會重置下拉菜單的狀態值。 下拉選項應回到原始默認選項。

class DropdownSales extends Component {

    constructor(props) 
    {
        super(props)

        this.state = {

            oem : 'all',
            oem_type : [],
            pickerSelection: 'OEM Wise',
            pickerDisplayed: false,

        }
    }

fetch_default = () => 
    {           
        var headers = {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Headers': 'x-access-token',
            'x-access-token': this.state.id
        }

        axios.post('http://**********************', {
            oem: this.state.oem
        }, {headers: headers})
        .then((res) => 
        {

            let TotalSales = res.data.data[0].TotalSales;

            })
        .catch(err => {
            console.log(err)
        });
    }


    setPickerValue = (newValue) => 
    {

        this.props.navigation.navigate('OemLevelTwo', {value: newValue});
        this.setState({
          pickerSelection: newValue
        });

        this.togglePicker();           
    }

      togglePicker = () => {
        this.setState({
          pickerDisplayed: !this.state.pickerDisplayed
        })
      }


render() {
return (
            <View>
                <View style={{flexDirection:'row', justifyContent:'space-between'}}>

                <TouchableOpacity onPress={() => this.togglePicker()} style={{flexDirection:'row', marginTop:10, marginLeft: 10}}>

                    <Text>
                        { this.state.pickerSelection }
                    </Text>
                    <Icon name="arrow-drop-down" color='#000' size={20}/>
                </TouchableOpacity>
                    <Modal 
                        visible={this.state.pickerDisplayed} 
                        animationType={"fade"} 
                        transparent={true}
                        onRequestClose={ () => {
                        this.setState({
                            pickerDisplayed: !this.state.pickerDisplayed
                        })
                    }}>
                        <View style={{ margin: 15, padding: 20,
                            backgroundColor: '#efefef',
                            bottom: 60,
                            alignItems: 'center',
                            position: 'absolute' }}>

                            { oem_type.map((value, index) => {
                            return <TouchableOpacity key={index} onPress={() => this.setPickerValue(value)} style={{ paddingTop: 4, paddingBottom: 4 }}>
                                <Text>{ value }</Text>
                                </TouchableOpacity>
                            })}

                        </View>
                    </Modal>                       
                </View>
            )
    }
}

現在，我在模式下拉菜單中的初始占位符文本是'OEM Wise' 。

當我從下拉列表中選擇某個值時，狀態pickerSelection顯示所選的新選項； 例如說“模型A ”。 當我從新屏幕返回時，我希望它在pickerSelection顯示'OEM Wise' 。

任何幫助表示贊賞。

Answer 1

您可以使用addListener訂閱導航生命周期的更新。 並且您的屏幕上還將具有此功能。 其余應保持不變。

constructor(props) {
    super(props)

    /* Your already existing code */

    this.didFocusSubscription = this.props.navigation.addListener('didFocus', () => {
        this.setState({ /* Your new state */ })
    });
}

componentWillUnmount() {
    this.didFocusSubscription.remove();
}

您可以在這里了解更多信息：