React 네이티브 커스텀 이벤트

Question

React Native로 시작하고, children 버튼으로부터 부모 컴포넌트에 이벤트를 전달하는 최선의 방법에 대해 궁금합니다. 따라서 예 :

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> 
);