React Native - 如何选择图像然后发送到另一个屏幕

问题描述 投票:0回答:1

我是编码的新手,我有一个问题,你如何从数组中选择一个图像并将其发送到图像源中的另一个页面。

我不知道这是否措辞得当,但过去4天一直困扰着这个问题。

我会接受任何我想向你学习的建议。

import React, {Component,} from 'react';
import {StyleSheet, Text, View, Platform, StatusBar, Image, Dimensions, TouchableOpacity, ScrollView } from 'react-native';
import { Icon, Button, Container, Header, Content, Left, Right, Body } from 'native-base';
import  Ionicons  from 'react-native-vector-icons/Ionicons';


import Settings from './settings';
import homescreen from './homescreen';
import Saved from './bookmarkscreen';
import IndivPhoto from './indivphoto';


var gold = [
    require('../../images/pc1.jpg'),
    require('../../images/pc3.jpg'),
    require('../../images/pc4.jpg'),
    require('../../images/pc5.jpg'),
    require('../../images/pc6.jpg'),
    require('../../images/pc7.jpg'),
    require('../../images/pc8.jpg'),
    require('../../images/storm.png'),
    require('../../images/vanguard.png'),
    require('../../images/vanguard2.png'),
]

这是图像阵列。

var {width,height} = Dimensions.get('window')
export default class Profile extends React.Component {
constructor(props)
{
    super(props)

    this.state = {
        activeIndex: 0, 
    }
}
segmentClicked = (index) => {
    this.setState({
        activeIndex: index
    })
}

renderSectionOne = () => {
    return gold.map((image,index)=>{
        return(
        <TouchableOpacity key={index} onPress={() =>  this.props.navigation.navigate('IndivPhoto')}>
            <View key={index} style={[ {width:(width)/3}, {height:(width)/3},
            { marginBottom: 2 },
             index % 3 !==0 ? {paddingLeft: 2 }: {paddingLeft: 0 }
             ]}>
                <Image  
                    resizeMethod="resize" 
                    style={{flex:1, width: undefined, height: undefined}}
                    source={image}
                />
            </View>
        </TouchableOpacity>
        )
    })
}

这是var gold中图像的渲染方法。我想知道的是如何从地图渲染部分选择单个图像并将其发送到另一个屏幕。

class IndivPhoto扩展了React.Component {constructor(props){super(props)

    this.state = {
        activeIndex: 0
    }
}
 render() {
     return(
        <ScrollView>
            <Header>
                <Left>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')}>
                      <Icon name="ios-arrow-round-back" 
                      style={{paddingLeft:10, right:8, fontSize: 50}}/>
                    </TouchableOpacity>
                    </Left>
                    <Body>
                <Text style={{right: 45, fontSize: 19, fontFamily: 'SourceSansPro-SemiBold' }}>Photo</Text>
                </Body>
            </Header> 
            <Content>
                <View style={{borderTopWidth: 1, borderTopColor: '#eae5e5', shadowOpacity: 10}}>
                <Left> 
                    <Image style={{borderRadius: 75, height: 32, width: 32, right: 145, top: 10}}
                    source={require('../../images/outfit2.png')}/>
                        <Text style={{ color: '#000',bottom: 18, right: 101, fontSize: 15, fontFamily: 'Roboto-Medium'}}>outfit</Text>
                </Left> 
                </View>
                <View style={{borderTopWidth: 1, borderTopColor: '#eae5e5'}}>
                    <Image resizeMethod="resize"

                    // put here from what is selected from profilescreen
                    source={{ }}

                    style={{height:350, width:null, flex:1}}/>
                    </View>

这是我想要将图像从配置文件屏幕发送到源中的屏幕。

javascript reactjs react-native react-navigation
1个回答
0
投票

您可以将参数传递给路由。

在您的情况下,您可以使用以下代码:

<TouchableOpacity key={index} onPress={() => {
                                      this.props.navigation.navigate('IndivPhoto', {
                                        /* image params go here */
                                      });
                                    }}>

</TouchableOpacity>
© www.soinside.com 2019 - 2024. All rights reserved.