リアクションネイティブJSのインテントでネイティブAndroidアクティビティを開始

Question

Androidネイティブからマイグレーションしてネイティブに反応させようとしていますが、リアクションコンポーネントからAndroidアクティビティを開始する必要があるところに固執しています。私はすべてのアイテムのclickイベントを呼び出す必要があり、ReactネイティブJSから既存のAndroidアクティビティを開始する方法を知らないメソッドhandleClickを持っています。たとえば -

import React, { 
    AppRegistry, 
    Component, 
    Image, 
    Dimensions, 
    ListView, 
    StyleSheet, 
    Text, 
    View, 
} from 'react-native'; 

var API_URL = 'http://www.mocky.io/v2/5714fffd0f00008b2249058f'; 
var width = Dimensions.get('window').width; 
var height = Dimensions.get('window').height 

class droid extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
     }), 
     loaded: false, 
    }; 
    } 

    componentDidMount() { 
    this.fetchData(); 
    } 

    fetchData() { 
    fetch(API_URL) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(responseData.products), 
      loaded: true, 
     }); 
     }) 
     .done(); 
    } 

    render() { 
    if (!this.state.loaded) { 
     return this.renderLoadingView(); 
    } 

    return (
     <ListView contentContainerStyle={styles.listView} 
     dataSource={this.state.dataSource} 
     renderRow={this.renderProduct} 
     /> 
    ); 
    } 

    renderLoadingView() { 
    return (
     <View style={styles.container_loading}> 
     <Text> 
      Loading products... 
     </Text> 
     </View> 
    ); 
    } 

    renderProduct(product) { 
    return (
     <View style={styles.container} onclick=handleClick> 
     <Image 
      source={{uri: product.image}} 
      style={styles.thumbnail} 
     /> 
     <View style={styles.rightContainer}> 
      <Text style={styles.title}>{product.title}</Text> 
      <Text style={styles.year}>{product.partners_count}</Text> 
     </View> 
     </View> 
    ); 
    } 

    handleClick(e) { 
    //start existing Android Activity with intent 
    } 

} 

var styles = StyleSheet.create({ 
    container: { 
    width: width/2 - 6, 
    height: height/2, 
    margin: 3, 
    backgroundColor: '#F5FCFF', 
    }, 
    rightContainer: { 
    }, 
    title: { 
    fontSize: 20, 
    marginBottom: 8, 
    textAlign: 'center', 
    }, 
    year: { 
    textAlign: 'center', 
    }, 
    thumbnail: { 
    flex: 1, 
    }, 
    listView: { 
    flex: 1, 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    paddingTop: 20, 
    backgroundColor: '#F5FCFF', 
    }, 
    container_loading: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
}); 


AppRegistry.registerComponent('test',() => test); 

Answer 1

私はそれはJSから直接可能性はないと思うが、あなたはネイティブモジュールを作成し、JavaScriptコードを経由して、そこからネイティブコードを呼び出すことができます。ネイティブモジュールを作成する方法についての詳細情報はここで見つけることができます：https://facebook.github.io/react-native/docs/native-modules-android.html

はトーストモジュールのためのチュートリアルに従って、それはかなり簡単です - 代わりにトースト、あなたは、AndroidのstartActivity()またはものは何でも@ReactMethodアノテーション付きメソッドで必要を呼び出します。