基本概念，如果您想将值从A传递到B

Question

我可以使用反应导航将值从第一屏幕传递到第二屏幕，但我想将文本输入值从第一屏幕传递到第四屏幕。如果有人帮助我，将不胜感激

Answer 1

使用redux来存储输入值，那么这些值将随处可见
在应用程序中，

Answer 2

请阅读反应导航文档，将参数传递给路线

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

基本概念，如果您想将值从A传递到B

在页面A处，传递itemId和otherParam this.props.navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here', });
在B页上，使用navigation.getParam

const itemId = navigation.getParam('itemId', 'NO-ID'); const otherParam = navigation.getParam('otherParam', 'some default value');

Answer 3

AsyncStorage可用。

您可以保存值并将其传递到所需的所有屏幕。

导入AsyncStorage库：

import {AsyncStorage} from 'react-native';

持久数据：

_storeData = async () => {
  try {
    await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
  } catch (error) {
    // Error saving data
  }
};

获取数据：

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

Example.js

//saveScreen
import {AsyncStorage} from 'react-native';
...
_storeData = async () => {
  try {
    await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
  } catch (error) {
    // Error saving data
  }
};
...

//your storage data use Screen
import {AsyncStorage} from 'react-native';
...
componentDidMount(){
 try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
}

如何使用react native将值从第一屏幕传递到第四屏幕？

3 个答案:

基本概念，如果您想将值从A传递到B