1
votes

React Native: les chaînes de texte doivent être rendues dans un composant

J'essaie de créer une page de profil sur laquelle l'utilisateur peut télécharger une image en tant qu ' Avatar react-native-elements et mettre à jour les informations de son profil sur un élément de formulaire de base natif strong>.

J'utilise également ImageEditor par défaut React Native pour le recadrage d'images et ImagePicker from Expo pour sélectionner des images.

Mais quand je ouvrez l'application sur Expo, j'obtiens cette erreur

Violation invariante: violation invariante: les chaînes de texte doivent être rendues dans un composant

Voici le code qui J'utilise.

Veuillez aider.

    import React from "react";
    import {
      View,
      Text,
      FlatList,
      ActivityIndicator,
      TouchableOpacity,
      StyleSheet,
     ImageEditor
    } from "react-native";
    import { Avatar } from "react-native-elements";
    import { Container, Content, Form, Input, Label, Item } from 'native-base';
    import * as Expo from 'expo';

    export default class ProfileScreen extends React.Component {
     static navigationOptions = {

     }

     constructor(props) {
     super(props);

     this.state = {
      loading: false,
      image: null,
      error: null,
      refreshing: false
     };
    }

    async _pickImage() {
    let result = await Expo.ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    if (result.cancelled) {
      console.log('got here');
      return;
    }

    let resizedUri = await new Promise((resolve, reject) => {
      ImageEditor.cropImage(result.uri,
        {
          offset: { x: 0, y: 0 },
          size: { width: result.width, height: result.height },
          displaySize: { width: 100, height: 100 },
          resizeMode: 'contain',
        },
        (uri) => resolve(uri),
        () => reject(),
      );
    });

    // this gives you a rct-image-store URI or a base64 image tag that
    // you can use from ImageStore

    this.setState({ image: resizedUri });
    }

    render () {
    let { image } = this.state;
    return (
      <Container>
        <Content>
            <View style={{flex:1, flexDirection: 'column', alignContent: 'flex-start', marginLeft: 20}}>
              <View style={{flex:1, flexDirection: 'row', alignContent: 'flex-end'}}>
                <TouchableOpacity onPress={() => alert('Save')}>
                    <Text style={{color: '#1f618d', fontWeight: 'bold'}}>Save</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => alert('Cancel')}>
                    <Text style={{color: '#1f618d', fontWeight: 'bold'}}>Cancel</Text>
                </TouchableOpacity>
              </View>
              <View style={{height: 30}}></View> //Empty view
              <View style={{alignContent: 'center'}}>
                <Avatar rounded size="xlarge" title="Profile Photo" source={{ uri: this.state.image }} onPress={this._pickImage}/>
              </View>
              <View style={{height: 30}}></View> //Empty view
              <Form>
                <Item floatingLabel>
                  <Label style={styles.labelText}>First Name</Label>
                  <Input/>
                </Item>
                <Item floatingLabel>
                  <Label style={styles.labelText}>Last Name</Label>
                  <Input/>
                </Item>
                <Item floatingLabel>
                  <Label style={styles.labelText}>Email</Label>
                  <Input/>
                </Item>
              </Form>
            </View>
        </Content>
      </Container>
    )
    }
    }


    const styles = StyleSheet.create({
    labelText: {
    fontSize: 12,
    color: '#1f618d',
    fontWeight: '100'
    }
    });


1 commentaires

` // Vue vide` cause une erreur


5 Réponses :


0
votes

Les commentaires dans JSX doivent avoir la syntaxe suivante.

{/* Empty view */}


0 commentaires

0
votes

Supprimer le commentaire en utilisant comme // Vue vide si vous souhaitez ajouter un commentaire dans la méthode render return , vous devez utiliser {/ * Empty View * /} quelque chose comme ça.

Au lieu de // Vue vide écrivez {/ * Vue vide * /}

vous ne pouvez pas ajouter de commentaire directement comme // commentaires dans la fonction return , ne l'autorisez que dans les parties de rendu ou de logique métier.

Merci


0 commentaires

0
votes

supprimer le commentaire //

utiliser le style de commentaire jsx

{/* comment */}


0 commentaires

1
votes

le problème est la façon dont utiliser le commentaire dans le rendu // Vue vide utilise quelque chose comme ça {/ * Vue vide * /}


1 commentaires

pouvez-vous s'il vous plaît le marquer comme réponse.Merci! @ user3001658



1
votes

essayez de commenter dans la section de rendu avec {/ * Vue vide * /}


0 commentaires