5
votes

React-Native: paramètre d'erreur et obtention de texte de ClipBoard

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
When pressing "copy to clipboard" i get an error saying 
null is not and object('evaluating NativeClipboard_1.default.setString')
and on pressing "view copied text" i get an TypeError Unhandlded promise rejection.
This code was copied directly from here: https://github.com/react-native-community/clipboard

react-native

4 commentaires

Bonjour, quelle version RN utilisez-vous?

C'est la version 0.61.4

Je pointerais normalement cela vers une erreur de liaison, mais j'obtiens la même chose après avoir lié la bibliothèque.

Je l'ai compris. Voir la réponse ci-dessous.

4 Réponses :

3
votes

Utiliser le presse-papiers de réaction

Exemple d'exécution: https://snack.expo.io/@msbot01/4c673f

code:

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

3 commentaires

Le composant React Native Clipboard est obsolète. Ils vous suggèrent d'utiliser l'édition communautaire, qui est ce que l'OP utilise. reactnative.dev/docs/clipboard.html

Le composant Presse-papiers de react-native / community n'est pas pris en charge par expo. Mais lorsque vous développez sans expo, cela fonctionnera très bien

@parvdesai OP n'a rien dit sur expo. Hors de portée imo.

3
votes

J'ai eu le même problème. Cela a fini par être un problème de liaison. J'ai exécuté un lien natif de réaction comme les instructions demandées, mais j'ai oublié d'installer le pod. Assurez-vous d'installer les pods après la liaison.

cd ios && pod install && cd ..

0 commentaires

3
votes

J'ai aussi eu ce problème, comme d'autres utilisateurs l'ont dit, le Clipboard - Clipboard de react-native-community n'est pas compatible avec Expo.

0 commentaires

0
votes

Mec, n'utilisez pas le presse-papiers de «react-native», utilisez de «@ react-native-community / clipboard», car il sera supprimé. Suivez les étapes:

1 - yarn add @react-native-community/clipboard

2 - react-native run-android

3 - yarn start

4 - succès ...

0 commentaires