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; 

這裏是我的Section Header。我試圖使用事件發射器，但沒有按照我希望的方式工作，除非我錯過了某些東西。

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

不知道這是去的正確方法，但使用this.props.onCustomEvent從嵌套按鈕的onPress事件似乎很好地工作。請讓我知道是否有更好的方式去做這件事。

應用：

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