React Nativeカスタムイベント

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; 

ここで私のセクションヘッダーです。私はEvent Emitterを使用しようとしていましたが、私が何かを見逃していない限り、私が望んでいたように動作していませんでした。これはこれについて移動する正しい方法ですが、ネストされたボタンのたonPressイベントからthis.props.onCustomEventを使用すると、正常に動作するようならば

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

わかりません。これを行うより良い方法があれば教えてください。

アプリケーション：

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; 

セクションヘッダ@ arbitezの答えに加えて

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

、あなたはスコープを維持したいならば、あなたは例えば、メソッドを作成し、それにバインドする必要があります。

親：

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

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

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