Question

我是新来的本地人。我试图在不使用onpress in按钮的情况下获取“键”。当我可以打开组件时，我只想获得一个“钥匙”。怎么可能？

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    Button,
    View,
    AsyncStorage
} from 'react-native';

export default class History extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: null
        }

    }
    async getKey() {
        try {
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            this.setState({ myKey: value });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Button
                    style={styles.formButton}
                    onPress={this.getKey.bind(this)}
                    title="Get Key"
                    color="#2196f3"
                    accessibilityLabel="Get Key"
                />
                <Text >
                    Stored key is = {this.state.myKey}
                </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 30,
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
});

我可以在onpress上获得一把钥匙，但是我想要在没有onpress的情况下。请提出建议。

Answer 1

您可以简单地通过componentDidMount获取键值。如您所知，当App运行并进入当前屏幕时，在呈现render函数之前和之后都会调用一系列方法。因此，ComponentDidMount在调用渲染函数之后出现。因此，由于您只需要显示键值，因此请遵循以下代码。

constructor(props) {
    super(props);
    this.state = {
        myKey:''
    }
}

getKey = async() => {
    try {
        const value = await AsyncStorage.getItem('@MySuperStore:key');
        this.setState({ myKey: value });
    } catch (error) {
        console.log("Error retrieving data" + error);
    }
}

componentDidMount(){
    this.getKey();
}

render() {
    return (
        <View style={styles.container}>
            <Button
                style={styles.formButton}
                onPress={this.getKey.bind(this)}
                title="Get Key"
                color="#2196f3"
                accessibilityLabel="Get Key"
            />
            <Text >
                Stored key is {this.state.myKey}
            </Text>
        </View>
    )
}

无论何时调用渲染函数，此时都不会设置静止键值。因此，this.state.myKey就是Stored key is。但是之后，一旦componentDidMount调用，它将设置myKey值并更改状态。它将触发渲染功能以再次渲染所有内容。最终，您无需触摸任何按钮即可在文本组件中显示键值。

没有onpress响应功能的调用函数

1 个答案: