React-Native：错误设置和从剪贴板获取文本

Question

import React, { useState } from 'react'
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import Clipboard from '@react-native-community/clipboard'

const App = () => {
    const [copiedText, setCopiedText] = useState('')

    const copyToClipboard = () => {
        Clipboard.setString('hello world')
    }

    const fetchCopiedText = async () => {
        const text = await Clipboard.getString()
        setCopiedText(text)
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.container}>
                <TouchableOpacity onPress={() => copyToClipboard()}>
                    <Text>Click here to copy to Clipboard</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => fetchCopiedText()}>
                    <Text>View copied text</Text>
                </TouchableOpacity>

                <Text style={styles.copiedText}>{copiedText}</Text>
            </View>

        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
//styles
})

export default App

当按“复制到剪贴板”时，我收到一条错误消息，指出 null 不是和对象（'评估 NativeClipboard_1.default.setString'），在按“查看复制的文本”时，我收到 TypeError Unhandlded 承诺拒绝。此代码直接从这里复制：https : //github.com/react-native-community/clipboard

Answer 1

我也有这个问题，其他用户都表示，Clipboard从react-native-community是不是与世博会相兼容。

Answer 2

根据 Expo 文档（https://docs.expo.io/versions/v40.0.0/sdk/clipboard/），他们的 API 提供了一个剪贴板。

安装

expo install expo-clipboard

并与

import Clipboard from 'expo-clipboard';

Answer 3

使用反应剪贴板

运行示例：https : //snack.expo.io/@msbot01/4c673f

代码：

import React, { useState } from 'react'
import { SafeAreaView, View, Text, TouchableOpacity, Clipboard, StyleSheet } from 'react-native'

const App = () => {
  const [copiedText, setCopiedText] = useState('')

  const copyToClipboard = () => {
    Clipboard.setString('hello world')
  }

  const fetchCopiedText = async () => {
    const text = await Clipboard.getString() 
    setCopiedText(text)
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={() => copyToClipboard()}>
          <Text>Click here to copy to Clipboard</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{marginTop:50}} onPress={() => fetchCopiedText()}>
          <Text>Click to View copied text</Text>
        </TouchableOpacity>

        <Text style={styles.copiedText}>{copiedText}</Text>
      </View>

    </SafeAreaView>
  ) 
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  copiedText: {
    marginTop: 10,
    color: 'red'
  }
})

export default App

Answer 4

我遇到过同样的问题。它最终成为一个链接问题。我按照说明运行了react-native link，但我忘记安装pod。确保在链接后安装 Pod。

cd ios && pod install && cd ..