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

Question

我想知道如何在 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>
    );
  }
}

Answer 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>
    )
  }
}

Answer 2

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

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