Thêm hành động/tiện ích mở rộng chia sẻ trong React Native

Question

Cố gắng tạo ứng dụng React Native đưa mục menu trong menu Chia sẻ (Chia sẻ tác vụ cho Android, Chia sẻ tiện ích mở rộng cho iOS) và nhận các mục được chia sẻ trong ứng dụng. Có một thành phần cho điều này, và nếu không phải là cách tốt nhất để xây dựng một?

Answer 1

Tôi đã triển khai mô-đun cho điều đó: https://www.npmjs.com/package/react-native-share-menu (hiện chỉ hoạt động cho Android).

Đó là làm thế nào để sử dụng nó:

Cài đặt các module:

npm i --save react-native-share-menu

Trong android/settings.gradle:

... 
include ':react-native-share-menu', ':app' 
project(':react-native-share-menu').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share-menu/android') 

Trong android/app/build.gradle:

... 
dependencies { 
    ... 
    compile project(':react-native-share-menu') 
} 

Đăng ký mô-đun (trong MainActivity.java):

import com.meedan.ShareMenuPackage; // <--- import 

public class MainActivity extends ReactActivity { 
...... 
    @Override 
    protected List<ReactPackage> getPackages() { 
     return Arrays.<ReactPackage>asList(
      new MainReactPackage(), 
      new ShareMenuPackage() // <------ add here  
     ); 
    } 
...... 
} 

Ví dụ:

import React, { 
    AppRegistry, 
    Component, 
    Text, 
    View 
} from 'react-native'; 
import ShareMenu from 'react-native-share-menu'; 

class Test extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      sharedText: null 
     }; 
    } 

    componentWillMount() { 
     var that = this; 
     ShareMenu.getSharedText((text :string) => { 
      if (text && text.length) { 
       that.setState({ sharedText: text }); 
      } 
     }) 
    } 

    render() { 
     var text = this.state.sharedText; 
     return (
      <View> 
       <Text>Shared text: {text}</Text> 
      </View> 
     ); 
    } 
} 

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

Answer 2

Bạn có thể sử dụng được xây dựng trong thành phần: https://facebook.github.io/react-native/docs/actionsheetios.html#content

Hoặc bạn có thể sử dụng thành phần này có thể chấp nhận bất cứ cái nhìn bạn muốn và làm cho nó trông giống như các thành phần phần iOS:

https://github.com/eyaleizenberg/react-native-custom-action-sheet

Những được thiết kế cho iOS. Đối với Android (và iOS), bạn có thể sử dụng tính năng này: https://github.com/EstebanFuentealba/react-native-share

Answer 3

Bạn có thể sử dụng Chia sẻ api mới được giới thiệu trong 0.33. Tôi thực sự có video về cách thực hiện việc này tại đây: http://codecookbook.co/post/how-to-share-text-from-your-react-native-app/