Question

刚开始使用React Native，并对如何最好地从子按钮实现向父组件传递事件感到好奇。例如：

import React, { Component } from 'react';
import ViewContainer from '../components/ViewContainer';
import SectionHeader from '../components/SectionHeader';

import {
  View
} from 'react-native';

class App extends Component {

  render() {
    return (
      <ViewContainer>
        <SectionHeader onCreateNew = {() => console.log("SUCCESS")} ></SectionHeader>
      </ViewContainer>
    );
  }
}

module.exports = ProjectListScreen;

这是我的章节标题。我试图使用事件发射器，但不按照我希望的方式工作，除非我错过了什么。

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import EventEmitter from "EventEmitter"

import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View
} from 'react-native';


class SectionHeader extends Component {

  componentWillMount() {
      console.log("mounted");
      this.eventEmitter = new EventEmitter();
      this.eventEmitter.addListener('onCreateNew', function(){
        console.log('myEventName has been triggered');
      });
  }

  _navigateAdd() {
      this.eventEmitter.emit('onCreateNew', { someArg: 'argValue' });
  }

  _navigateBack() {
      console.log("Back");
  }

  render() {
    return (
      <View style={[styles.header, this.props.style || {}]}>
        <TouchableOpacity style={{position:"absolute", left:20}} onPress={() => this._navigateBack()}>
          <Icon name="chevron-left" size={20} style={{color:"white"}} />
        </TouchableOpacity>
        <TouchableOpacity style={{position:"absolute", right:20}} onPress={() => this._navigateAdd()}>
          <Icon name="plus" size={20} style={{color:"white"}} />
        </TouchableOpacity>
        <Text style={styles.headerText}>Section Header</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
       height: 60,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#00B9E6',
       flexDirection: 'column',
       //paddingTop: 25
   },
   headerText: {
       fontWeight: 'bold',
       fontSize: 20,
       color: 'white'
   },
});

module.exports = SectionHeader;

感谢您的帮助！

Answer 1

不确定这是否是正确的方法，但是从嵌套Button的onPress事件中使用this.props.onCustomEvent似乎工作正常。如果有更好的方法可以告诉我。

应用：

import React, { Component } from 'react';
import ViewContainer from '../components/ViewContainer';
import SectionHeader from '../components/SectionHeader';

import {
  View
} from 'react-native';

class App extends Component {

  render() {
    return (
      <ViewContainer>
        <SectionHeader onCreateNew = {() => console.log("SUCCESS")} ></SectionHeader>
      </ViewContainer>
    );
  }
}

module.exports = ProjectListScreen;

章节标题

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';

import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View
} from 'react-native';

class SectionHeader extends Component {

  render() {
    return (
      <View style={[styles.header, this.props.style || {}]}>
        <TouchableOpacity style={{position:"absolute", left:20}} onPress={() => this.props.onCreateNew()}>
          <Icon name="chevron-left" size={20} style={{color:"white"}} />
        </TouchableOpacity>
        <Text style={styles.headerText}>Section Header</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
       height: 60,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#00B9E6',
       flexDirection: 'column',
       //paddingTop: 25
   },
   headerText: {
       fontWeight: 'bold',
       fontSize: 20,
       color: 'white'
   },
});

module.exports = SectionHeader;

Answer 2

除了@ arbitez的答案，如果你想保持范围，那么你应该制作一个方法并绑定它，例如：

父：

constructor(props) {
    super(props)
    // ........
    this.onCreateNew=this.onCreateNew.bind(this);
}

onCreateNew() {
    console.log('this: ', this);
}

render() {
    return (
      <ViewContainer>
        <SectionHeader onCreateNew = {this.onCreateNew} ></SectionHeader>
      </ViewContainer>
);

React Native自定义事件

2 个答案: