Một Thành phần Kiểm duyệt Nội dung Đa Nền tảng cho React Native

react-native-censored

react-native-censored là một công cụ giúp kiểm duyệt nhanh chóng nội dung có thể gây phản đối trong ứng dụng của bạn để nó tuân thủ các hướng dẫn của thị trường ứng dụng mà bạn đang xuất bản.

Apple AppStore và Google PlayStore có các hướng dẫn tương tự – nhưng khác nhau – với hướng dẫn của Google thường linh hoạt hơn. Ứng dụng React Native chia sẻ hầu hết (nếu không phải tất cả) mã giữa ứng dụng iOS và Android và việc quản lý nội dung khác nhau trở nên khó khăn. react-native-censored cho phép bạn dễ dàng kiểm duyệt nội dung cho các nền tảng cụ thể.

Cài đặt

react-native-censored sử dụng react-native-blur để đạt được hiệu ứng mờ và react-native-svg để hiển thị tem bị kiểm duyệt. Nếu bạn đang sử dụng Expo thì bạn đã có sẵn các phụ thuộc này đã được cài đặt trước. Nếu ứng dụng của bạn không sử dụng Expo, bạn sẽ phải cài đặt react-native-blur và react-native-svg trước khi có thể sử dụng react-native-censored.

Sử dụng

Ví dụ

import React from 'react'
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
import { Censored } from 'react-native-censored'
// For Expo apps use line below instead of above line:
// import { Censored } from 'react-native-censored/expo'

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Censored intensity={100} scale={.75} rotate="45deg" fill="black" platforms={['isisos']} >
          <Text style={styles.imageTitle}>Jesus Christ</Text>
          <Image source={require('./assets/uncensored.jpg')} style={styles.image} />
        </Censored>
        <Censored intensity={100} scale={.75} rotate="45deg" platforms={['ios', 'android']} >
          <Text style={styles.imageTitle}>Prophet Muhammad</Text>
          <Image source={require('./assets/censored.jpg')} style={styles.image} />
        </Censored>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  imageTitle: {
    color: 'black',
    fontSize: 24,
    textAlign: 'center'
  },
  image: {
    resizeMode: 'contain',
    maxHeight: 0.4 * Dimensions.get('window').height
  }
})

Tham số

Ai sử dụng react-native-censored

TrumpTweetTrumps

Chi tiết tải về:

Tác giả: redpandatronicsuk
Nguồn: https://github.com/redpandatronicsuk/react-native-censored

Giấy phép: MIT license