React Native报错求助：Text字符串需在<Text>组件内渲染

Hey there! That error you're hitting is super common when working with React Native JSX—let's break down what's going on and fix it quickly.

The Root Cause #

React Native requires all text content to be wrapped inside a <Text> component. In your code, you've added JavaScript-style single-line comments (//Empty view) directly next to your <View> elements in the JSX:

<View style={{height: 30}}></View> //Empty view

JSX interprets that //Empty view as an un-wrapped text string, which violates React Native's rules and triggers the error.

The Fix #

Replace those single-line comments with JSX-compatible block comments, wrapped in curly braces like this:

<View style={{height: 30}}></View> {/* Empty view */}

Or if you don't need the comments anymore, you can just remove them entirely—either way works.

Updated Code Snippet #

Here's the corrected part of your render method:

<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>

Quick Note on JSX Comments #

Remember: In JSX, you can't use // for inline comments like you do in regular JavaScript. Any comments inside your JSX tree need to be wrapped in {/* ... */} to be treated as valid JSX expressions instead of un-wrapped text.

Give this a try, and your error should disappear immediately!

内容的提问来源于stack exchange，提问作者user3001658