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'
}
});
5 Réponses :
Les commentaires dans JSX doivent avoir la syntaxe suivante.
{/* Empty view */}
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
écrivez
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
supprimer le commentaire //
utiliser le style de commentaire jsx
{/* comment */}
le problème est la façon dont utiliser le commentaire dans le rendu // Vue vide utilise quelque chose comme ça {/ * Vue vide * /}
pouvez-vous s'il vous plaît le marquer comme réponse.Merci! @ user3001658
essayez de commenter dans la section de rendu avec {/ * Vue vide * /}
` // Vue vide` cause une erreur