React Native - Как выбрать изображение, а затем отправить на другой экран - PullRequest
0 голосов
/ 01 сентября 2018

Я новичок в кодировании, и у меня есть вопрос о том, как выбрать изображение из массива и отправить его на другую страницу в источнике изображения.

Я не знаю, правильно ли это сформулировано, но это беспокоило последние 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. Я хочу знать, как я могу выбрать отдельное изображение из раздела рендеринга карты и отправить его на другой экран.

класс IndividualPhoto расширяет React.Component { Конструктор (реквизит) { супер (реквизит)

    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>

Это экран, с которого я хочу отправить изображение в источник из профиля.

1 Ответ

0 голосов
/ 01 сентября 2018

Вы можете передавать параметры в маршруты.

В вашем случае вы можете использовать следующий код:

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

</TouchableOpacity>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...