Question

我正在尝试从Android本机迁移到以增量方式响应本机，我陷入了需要从React Component启动Android Activity的地步。我有一个方法handleClick我需要调用每个项目上的click事件，我不知道如何从React本机JS启动现有的Android Activity。例如 -

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

I don't think it's possible directly from JS, but you can create a native module and call a native code from there via JavaScript code. More info on how to create a native module can be found here: https://facebook.github.io/react-native/docs/native-modules-android.html

Follow the tutorial for Toast Module, it's pretty straightforward - instead of Toast, you call the Android's startActivity() or whatever you want in the @ReactMethod annotated method.

从React Native JS开始本意Android Activity

1 个答案: