React Native 子组件传值给父组件的方式

实现React Native 中父子组件通信间的双向数据流，思路如下：

1.父组件向子组件传递props,其中props 中带有子组件的初始化数据以及回调方法；

2.子组件手动触发父函数传递进来的回调方法，同时将子组件的数据传递出去。

PS.使用 props 来传递事件，并通过回调的方式实现，这样的实现其实不是特别好，但在没有任何工具(redux)的情况下不失为一种简单的实现方式

父组件：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
//import profiles, {firstName, lastName, year} from './profile.js';
import Profiles from './profile.js';

export default class HelloWorldApp extends Component {
  //初始状态
  constructor(props) {
    super(props)
    this.state = {
      firstName:'',
      lastName:'',
      year:-1,
      allName:''
    }
  }

//回调函数：将传来的参数用this.setState方法修改初始状态值，括号里是参数
_setName(firstName,lastName,year) {
  this.setState({
    firstName: firstName,
    lastName:lastName,
    year:year,
  });
  console.warn(firstName,lastName,year);
}

  render() { 
    return (
        <View>
          //绑定父组件_setName的this，并传给子组件
          <Profiles _setName = {this._setName.bind(this)}/>
          <Text style = {styles.red}>{this.state.firstName}</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create ({
  red: {
    backgroundColor: 'red',
    paddingTop: 200,
    alignItems: 'center',
  }
})

子组件：

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
import PropTypes from "prop-types";

const firstName = "hahhaha";
const lastName = "bbbbbb";
const year = 2018;

//export {firstName,lastName,year};

export default class profiles extends Component {
  render() {
    return (
      <View>
        <Text
          style={styles.red}
          //这里要注意的是，返回的参数必须是一个对象，所以要用{}括起来，而不是括号()
          onPress={() => {
            this.props._setName(firstName,lastName,year);
          }}
        >
          点击
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  red: {
    backgroundColor: "blue",
    paddingTop: 400,
    alignItems: "center"
  }
});

另外一种就是子组件直接export 三个属性

export {firstName,lastName,year};

父组件直接用就可以了

import profiles, {firstName, lastName, year} from './profile.js';

    console.warn(firstName);
    console.warn(lastName);

这种方式一般不用。