没有onpress反应原生的调用函数 [英] call function without onpress react native

问题描述

我是本机反应的新手.我试图在不使用 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.请提出建议.

I am able to get a key with onpress but i want without onpress. Please suggest.

推荐答案

您可以使用 componentDidMount 简单地获取您的键值.应该知道，当App运行到当前屏幕时，在渲染render函数之前和之后都会调用一个方法流.所以 ComponentDidMount 出现在调用渲染函数之后.因此，由于您只需要显示键值，只需按照以下代码即可.

You can simply get your key value with componentDidMount. As you should know, when the App runs and comes to the current screen, there is a flow of methods will be called before and after rendering the render function. So ComponentDidMount comes after render function is called. So since you need to only display the key value, just follow below code.

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 值并更改状态.这将触发渲染功能再次渲染所有内容.这将最终在文本组件中显示您的键值，而无需触摸任何按钮.

Whenever render function being called, in that time, still key value is not set. So, this.state.myKey would be just Stored key is. But after that, once the componentDidMount called, it sets the myKey value and change states. Which will trig render function to render everything again. That would show your key value within the text component eventually without touching any button.

这篇关于没有onpress反应原生的调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！