blocks|key|2557449|text|在第二个屏幕上，Image标签应该具有source属性而不是image属性，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2557450|<Image+source={{uri:uri}}+style={{width:+200,+height:+200}}+/>|2557451|entityMap^0|J|6|U|5|0|0|1Q|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

On your second screen, the Image tag should have a <code>source</code> property instead of <code>image</code>, like this:

<code>&lt;Image source={{uri:uri}} style={{width: 200, height: 200}} /&gt;</code>

blocks|key|2557478|text|据我所知，您正在尝试将数据从第二个屏幕发送回第一个屏幕。一种解决方案是在传递给第二个屏幕的第一个屏幕内创建一个函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2557479|因此，您可以在第一个屏幕中声明一个函数，其中使用标题更新状态：|2557480|returnTitle(uri,+title)+{
++++const+{previews}+=+this.state;
++++previews.push({uri,+title});
++++this.setState({previews});
}|code-block|syntax|javascript|2557481|当您导航到第二个屏幕时，您将传递此函数：|2557482|navigate('ImagePreview',+{+
++++uri:+result.uri,+
++++returnTitle:+this.returnTitle.bind(this)
});|2557483|在第二个屏幕中，您为您的按钮定义了一个onPress处理程序，您可以在其中调用returnTitle函数并返回：|2557484|onSavePress+=+()+=>+{
++++const+{title}+=+this.state;+//+Not+sure+where+you+store+the+title
++++const+{navigation}+=+this.props;
++++const+uri+=+navigation.getParam('uri');
++++navigation.state.params.returnTitle(uri,+title);
++++navigation.goBack();
}|2557485|记住从你的输入中获取标题。如果将代码存储在组件状态中，代码将不会显示。|2557486|现在，在第一个组件中，更改您的_renderItem方法以适应现在是对象数组的预览：|2557487|_renderItem+({+item,+index+})+{
++++return+(
++++++++<View>
++++++++++++<Image+source={{uri:+item.uri}}/>
++++++++++++<Text>{item.title}</Text>
++++++++</View>
++++);
}|2557488|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

From my understanding you are trying to send data back from the second screen to the first screen. One solution is to create a function inside the first screen that you pass to the second screen. 

So you declare a function in the first screen where you update the state with the title:

<pre><code>returnTitle(uri, title) {
 const {previews} = this.state;
 previews.push({uri, title});
 this.setState({previews});
}
</code></pre>

And you pass this function when you navigate to the second screen:

<pre><code>navigate('ImagePreview', { 
 uri: result.uri, 
 returnTitle: this.returnTitle.bind(this)
});
</code></pre>

In your second screen you define an onPress handler for your Button where you call the returnTitle function and navigate back:

<pre><code>onSavePress = () =&gt; {
 const {title} = this.state; // Not sure where you store the title
 const {navigation} = this.props;
 const uri = navigation.getParam('uri');
 navigation.state.params.returnTitle(uri, title);
 navigation.goBack();
}
</code></pre>

Remember to get the title from your input. The code does not show if you store it in the component state.

Now in the first component change your _renderItem method to fit the previews which is now an array of objects:

<pre><code>_renderItem ({ item, index }) {
 return (
 &lt;View&gt;
 &lt;Image source={{uri: item.uri}}/&gt;
 &lt;Text&gt;{item.title}&lt;/Text&gt;
 &lt;/View&gt;
 );
}
</code></pre>

I have an image uploader in my react-native app, once you upload the image it navigates you to another screen and previews the image there, in the image preview screen there is an input for giving a name for this image and a save button, when clicking on save button it should go back to the previous screen and display the image and it's name there inside the flatlist i have, i managed to do the steps until previewing the image but after that i didn't know what to do next, here is the code:

First screen:

<pre><code> state = {
 image: null,
 previews: []
 };

 _pickImage = async () =&gt; {
 await Permissions.askAsync(Permissions.CAMERA_ROLL);
 const {navigate} = await this.props.navigation;

 let result = await ImagePicker.launchImageLibraryAsync({
 allowsEditing: false,
 aspect: [4, 4],
 });

 navigate( 'ImagePreview', { uri : result.uri } );

 if (!result.cancelled) {
 this.setState({ image: result.uri });
 }
 };

 _keyExtractor (item, index) {
 return index.toString();
 }

 _renderItem ({ item, index }) {
 return (
 &lt;View&gt;
 &lt;Image source={require('')}/&gt;
 &lt;Text&gt;Image title&lt;/Text&gt;
 &lt;/View&gt;
 );
 }

&lt;FlatList style={{ flex: 0.5 }}
 data={this.state.previews}
 keyExtractor={this._keyExtractor.bind(this)}
 renderItem={this._renderItem.bind(this)}
 numColumns={2}
/&gt;
</code></pre>

Second screen:

<pre><code>const uri = navigation.getParam('uri');
&lt;Image source={{uri:uri}} style={{width: 200, height: 200}} /&gt;
&lt;Button title="Save" /&gt;
</code></pre>

Image preview in react-native

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在我的react原生应用程序中有一个图像上传程序，一旦你上传图像，它会将你导航到另一个屏幕并在那里预览图像，在图像预览屏幕中有一个输入，用于为该图像指定名称和一个保存按钮，当单击保存按钮时，它应该返回到前一个屏幕并显示图像，它的名称在我的列表中，我设法完成了这些步骤，直到预览图像，但之后我不知道下一步该做什么，以下是...

问在react-native中预览图像
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react-native中预览图像EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react-native中预览图像
EN