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显示所选的新选项；例如说'model A '。从新屏幕返回时，我希望它在'OEM Wise'中显示pickerSelection。

任何帮助表示赞赏。

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();
}

您可以详细了解here：

Android后退按钮处理本机反应

1 个答案: