关于 expo:React Native：文本字符串必须在 <Text> 组件中呈现

React Native: Text strings must be rendered within a <Text> component

我正在尝试创建一个个人资料页面，用户可以在其中上传图像作为 react-native-elements 头像，并在基于原生的表单元素上更新他的个人资料信息。

我还使用 React Native 默认 ImageEditor 进行图像裁剪，并使用 Expo 中的 ImagePicker 来选择图像。

但是当我在 Expo 上打开应用程序时，我得到了这个错误

Invariant Violation：Invariant Violation：文本字符串必须在组件内呈现

下面是我正在使用的代码。

请帮忙。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

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'
}
});