Question

我是新来的本地人。我正在尝试从其他组件中获取“密钥”。我的意思是我试图从另一个组件中调用一个函数作为父组件。但是，我对所有这些参考调用和所有信息都一无所知。请向我建议如何从其他组件调用函数。

// AddScreen.js

import React, { Component } from 'react';
import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';
import styles from '../components/styles';
import { createStackNavigator } from 'react-navigation';
import History from '../components/History';

export default class AddScreen extends Component {
    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);
        }
    }
    async saveKey(value) {
        try {
            await AsyncStorage.setItem('@MySuperStore:key', value);
        } catch (error) {
            console.log("Error saving data" + error);
        }
    }
    componentDidMount() {
        this.getKey();
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.MainContainer}>
                <View style={styles.Date_input}>
                    <TextInput
                        placeholder="Add input"
                    value={this.state.myKey}
                    onChangeText={(value) => this.saveKey(value)}
                    />
                </View>
                <View style={styles.getKeytext}>
                    <Text >
                        Stored key is = {this.state.myKey}
                    </Text>
                </View>
                <View style={styles.Historybutton}>
                    <Button
                        onPress={() => navigate('History')}
                        title="Press Me"
                    />
                </View>
            </View>
        )
    }
}

//History.js

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

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

    }
    render() {call async function synchronously
        return (
            <View style={styles.container}>
               <Button
                    style={styles.formButton}
                    onPress={this.onClick}
                    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',
    },
});

我只想从getKey组件调用History函数以在myKey组件的屏幕上获取History的值。

请以我的组件为例，向我提出建议。

Answer 1

您只需要通过导航参数传递密钥即可。

<Button
   onPress={() => navigate('History', { key: this.state.myKey })}
   title="Press Me"
/>

在历史记录部分中，您可以执行

render() {
   const key = this.props.navigation.getParam('key');

   return (
      // other code
   )
}

您可以在此处阅读有关传递参数的更多信息。 https://reactnavigation.org/docs/en/params.html

无法从其他组件获取功能

1 个答案: