2016-07-29 90 views
7
<TouchableHighlight onPress={this._onPress.bind(this)}> 
    <Text style={{color: 'white'}}>CLOSE</Text> 
</TouchableHighlight> 

_onPress(e) { 
    console.log(e.nativeEvent.target); 
} 

如上所述,target只是一個名爲node id的數字,但我想獲得真正的元素。我怎樣才能做到這一點?我怎樣才能得到真正的節點id? react-native

回答

9

做到這一點最近改變反應過來的時候/陣營本地公共代碼周圍很感動,但我的建議是對ReactNativeComponentTree

更具體地說check out Inspector codeavailable methods的代碼,下面的代碼應該做的把戲你:

var ReactNativeComponentTree = require('react/lib/ReactNativeComponentTree'); 
ReactNativeComponentTree.getInstanceFromNode(nativeTag); 
+0

thks,你的回答是正確的 – CoderLim

+0

你有解決方案版本0.40 reac原生? –

+0

我在React源代碼中看到了這個。 'ReactDOM.render(

Hi.

,node); var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);'from https://github.com/facebook/react/blob/efaa26eb50169aba7f9194119faf64b67cbff460/src/renderers/shared/hooks/__tests__/ReactHostOperationHistoryHook-test.js –

5

這就是我最終爲自己解決類似的情況。它不以任何方式遵循相同的方法,但它做到了!

onItemPressed(item) { 
    this.props.navigateForward(item.sceneId); 
    this.props.closeDrawer(); 
} 

render() { 
    var listItems = []; 

    for (var i=0; i < this.props.navigation.scenes.length; i++) { 
    var item = this.props.navigation.scenes[i]; 

    listItems.push(<ListItem 
     onPress={this.onItemPressed.bind(this, item)} 
     key={i} 
     title={item.title} 
     leftIcon={{name: item.icon}} 
     underlayColor={colors.lightPrimary} 
     containerStyle={styles.menuItemStyle} 
     titleStyle={styles.menuItemTitle} 
    />); 
    } 


    return (
    <View style={styles.container}> 
     <List containerStyle={styles.listContainer}> 
     {listItems} 
     </List> 
    </View> 
) 
}; 
+4

這種方法以前是可以接受的,但是現在約定是爲了避免爲每個渲染週期傳遞新創建的函數,因爲由於閉包以及由於引用每次都不同而引起的高性能代價(因此觸發渲染)。 – eremzeit

+0

我認爲這是一個更好的解決方案,然後接受。但應該有更好的一個。 – hsafarya

+1

@eremzeit你可以使用shouldComponentUpdate(nextProps,nextState){if(this.props ...!== nextProps ....){return true; }返回false;}以避免多餘的呈現。 – Stich

1

在反應本地v.0.42你需要這樣的說法:

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree'; 
ReactNativeComponentTree.getInstanceFromNode(e.target)._currentElement; 
3

在反應本地v.0.51你需要這樣的說法:

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/shims/ReactNativeComponentTree'; 
ReactNativeComponentTree.getInstanceFromNode(e.target); 

._currentElement.props變更爲.memoizedProps