如何在 React Native 中的组件之间传递数据

Posted 2023-02-22

【中文标题】如何在 React Native 中的组件之间传递数据

【英文标题】：How to pass data between components in React Native

【发布时间】：2018-07-08 09:03:01

【问题描述】：

我想知道如何在 React Native 中单击按钮时从组件中获取数据并将其传递给其他组件。这是我的代码：

这是我的输入组件：

ZipInput.js

import React from 'react';
import  TextInput  from 'react-native';
import styles from './../assets/style';


export default class ZipInput extends React.Component 

  constructor(props) 
    super(props);
    this.state = '';
  

  render() 
    return (
      <TextInput
       style=styles.input
       onChangeText=(text) => this.setState(text)
       keyboardType='numeric'
       placeholder = 'Enter Zip Code'
     />
    );
  

这是我的按钮：

GoButton.js

import React from 'react';
import  Button, View  from 'react-native';
import styles from './../assets/style';
import StackNavigator from 'react-navigation';


export default class GoButton extends React.Component 
  _handlePress(event) 
    alert('Pressed!');
  

  render() 
    const navigate = this.props.navigateProp
    return (
      <View style=styles.buttonContainer>
        <Button
          onPress=() =>
            navigate('ZipResultScreen')
          
          title="GO"
          accessibilityLabel="Find Insurance Quotes"
          color='#fff'
        />
      </View>

    );
  

我单独创建了组件并将它们导入 Homescreen.js。从那里我会将数据传递给其他组件。

这是我的 Homescreen.js：

import React from 'react';
import  StyleSheet, Text, View, ImageBackground  from 'react-native';
import styles from '../assets/style'
import Header from '../components/header';
import ZipInput from '../components/zipinput';
import InsuranceType from '../components/insurancetype';
import GoButton from '../components/gobutton';
import StackNavigator from 'react-navigation';


export default class HomeScreen extends React.Component 
  render() 
    const navigate = this.props.navigation;
    return (
      <View style=styles.container>
          <Header />
          <ImageBackground
          style=styles.imgbg
          source= uri: 'https://www.expertinsurancereviews.com/wp-content/uploads/2017/03/background-hp-1.jpg' 
        >
              <View style=styles.intro>
                <Text style=styles.title>Compare Insurance Rates</Text>
                <ZipInput  />
                <InsuranceType  style=styles.select />
                <GoButton navigateProp = navigate />
              </View>

          </ImageBackground>
      </View>
    );
  

【问题讨论】：

***.com/questions/37949187/…的可能重复

【参考方案1】：

您需要在导航到另一个屏幕时传递数据。

考虑以下示例。

<Button onPress=() => navigation.navigate('ScreenName', data: title: 'Hello World' )>

export default class Screen extends React.Component 
  render () 
    const  title  = this.props.navigation.state.params.data

    return (
      <View>
        <Text>title</Text>
      </View>
    )
  

【讨论】：

感谢您的回答，但我没有看到从我上面提到的那些组件中获取值的解决方案。单击按钮时，我需要获取这些值。

这些组件和值是什么意思？你需要更好地解释。

是否要将数据从父组件传递给子组件？如果这是你想要的，而不是将值作为道具传递<GoButton data=data />。

我有 3 个组件：子组件：、，父组件：。我想要的是：当 单击时，从 获取值并将其传递给 （父组件）

以<ZipInput onChangeText=(zip) => this.setState(zip)> 的形式将 onChangeText 属性添加到您的 ZipInput 组件中，然后在 ZipInput 中以 <TextInput onChangeText=this.props.onChangeText 的形式添加。希望对你有帮助，祝你好运。

【参考方案2】：

这是我从 React Navigation 文档中找到的。就是这么简单。

https://reactnavigation.org/docs/params.html

【讨论】：

当你说“数据”时，你到底是什么意思？如果您谈论的是传递文本字符串而不是完整的 api 调用，则存在很大差异。传递导航参数就是那个参数。