扩展应用程序与主机应用程序之间的本机通信

时间:2019-08-22 11:37:54

标签: ios react-native

我正在使用react-native开发ios动作扩展。我已经创建了它,但是当我尝试从另一个应用程序(例如Safari或chrome)打开扩展程序时,它没有显示扩展程序的UI,而是显示了空白屏幕。如果有人知道如何为扩展程序创建UI并与主机应用程序通信,请告诉我。从另一个应用程序打开时,我们如何调试扩展?我已经提到了以下示例。

https://github.com/promptworks/react-native-action-extension-example

谢谢。

下面是我的index.js文件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export class AppComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

export class ActionExtensionComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to our Action Extension!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

export default class RNShare extends Component {
  static propTypes = {
    isActionExtension: PropTypes.bool.bool
  }
  static defaultProps = {
    isActionExtension: false
  }

  render() {
    if (this.props.isActionExtension) {
      return <ActionExtensionComponent />
    } else {
      return <AppComponent />
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

0 个答案:

没有答案