如何在平面列表中打印图像组件？ 反应本机

Question

我有这个对象：

 const new_note = {
                    note_number: last_note, //create a new_note object, note_number will be the key for each note
                    content: this.state.content, 
                    color: this.state.default_color, 
                    text_color: this.state.color, 
                    uri: this.uri,
                    real_content: clear_real_content,
                    images_uri: this.images_uri,
                }; 

其中 this.uri 是一个图像组件：

this.uri = <Image source = {{uri: clear_content}} style = {{width: 50, height: 50}}></Image>;

并将其打印在平面列表中：

                    <FlatList 
                        data = {this.props.array_notes} 
                        renderItem = {({item}) => (
                        <TouchableOpacity 
                            onLongPress = {() => this.show_hide_popup_menu(item)}
                            onPress = {() => this.select_edit(item)}
                            activeOpacity = {0.9}>
                            <View style = {this.styles.notes_container(dark, notes_backgroundColor, item)}>
                                {item.uri}
                            </View> 
                        </TouchableOpacity>)}
                        contentContainerStyle = {{flexGrow:1}}>
                    </FlatList>

但我收到此错误：

Answer 1

您只能在new_note对象中设置uri而不是Image元素。

const new_note = {
    note_number: last_note,
    content: this.state.content, 
    color: this.state.default_color, 
    text_color: this.state.color, 
    // uri: this.uri, <-- change this line as below
    uri: clear_content,
    real_content: clear_real_content,
    images_uri: this.images_uri,
};

      <FlatList 
          data = {this.props.array_notes} 
          renderItem = {({item}) => (
          <TouchableOpacity 
              onLongPress = {() => this.show_hide_popup_menu(item)}
              onPress = {() => this.select_edit(item)}
              activeOpacity = {0.9}>
              <View style = {this.styles.notes_container(dark, notes_backgroundColor, item)}>
                  <Image source={{ uri: item.uri }} style={{ width: 50, height: 50 }}/>
              </View> 
          </TouchableOpacity>)}
          contentContainerStyle = {{flexGrow:1}}>
      </FlatList>