Question

您好，我正在创建一个应用程序，但在尝试创建一种用户选择多个图像的方式时遇到了困难，这些图像随后会传递到另一个屏幕。我能在这方面得到一些帮助吗？将不胜感激。

因此，我的应用程序的工作方式是，用户选择多个项目，然后应该有一个添加按钮或一个保存按钮，它们将获取所选项目并将其显示在另一个屏幕上。这些项目的值为图像而不是文本。这纯粹是我在这里问这个问题的原因，因为大多数React-Native教程都包含基于文本的值，而不是基于图像的值。

我遇到的问题是，试图找出一种方法供用户选择多个项目，然后单击“保存”按钮，这将把所有“选定项目”转移到另一个要显示的屏幕。就像观众一样。

 import React, { Component } from 'react';
import { Text, View, StyleSheet, AppRegistry, FlatList, Image, TouchableOpacity } from 'react-native';
import flatListData from '../database';
 
class FlatListItem extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'FirstScreen!'
})

  render() {          
    return (        
        <View style={{
            flex: 1,
            flexDirection:'column',                                
        }}>            
            <View style={{  
                    flex: 1,
                    flexDirection:'row',
            }}>            
                <View style={{
                        flex: 1,
                        flexDirection:'column',   
                        height: 100                 
                    }}>            
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('SecondScreen')} >
                              <Image source={{uri: this.props.item.imageUrl}}
                              style={{width: 100, height: 100, margin: 5}}></Image>
                        </TouchableOpacity>
                </View>             
            </View>
            <View style={{
                height: 1,
                backgroundColor:'white'                            
            }}>
        
            </View>
      </View>
    );
}
}

class FirstScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'First Screen'
})

  render() {
    return (
      <View style={{flex: 1, marginTop: 22}}>
          <FlatList 
              data={flatListData}
              renderItem={({item, index})=>{
                  //console.log(`Item = ${JSON.stringify(item)}, index = ${index}`);
                  return (
                  <FlatListItem item={item} index={index}>

                  </FlatListItem>);
              }}
              >

          </FlatList>
      </View>
    );
  }
}

export default example;

const styles = StyleSheet.create({
  flatListItem: {
      color: 'white',
      padding: 10,
      fontSize: 16,  
  }
});

Answer 1

由于您未提供任何示例代码，因此我将尝试提出一种通过伪代码进行处理的方法

您可以将图像列表提取到一个集中的帮助器类中，然后从该帮助器类进行渲染以供用户选择。

现在，当用户选择其中一张图像时，您只需要捕获ID或任何唯一标识符，然后将其传递到第二个屏幕即可。

在第二个屏幕上，仅使用您收到的ID /唯一标识符，并从上述集中式帮助程序类中进行搜索并呈现它。

Answer 2

好像您有两件事要弄清楚；

一个人跟踪用户在您的图像选择屏幕上选择了哪些项目
在屏幕之间回传数据

根据您的示例，您似乎最有可能使用react-navigation，因此最简单的解决方案是利用React的state并使用react-navigation的参数在屏幕之间传递。 / p>

通过react-navigation，您可以使用navigation.navigate中的第二个参数将参数/回调传递到另一个屏幕。因此，您可以导航到屏幕，并向其传递回调。

...
this.props.navigation.navigate(
  'ItemSelectionScreen',
  { onSubmit: (items) => { /* Do something with items */ } }
)
...

这是选择屏幕的基本示例，其中带有一些注释以说明其工作原理。

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

class ItemSelectionScreen extends React.Component {
  constructor(props) {
    super(props);

    this.onSubmit = () => props.navigation.getParam('onSubmit'); // Keep the passed callback once we have navigated to this screen

    this.state = {
      selectedItems: [] // Our initial selectedItems (empty)
    };
  }

  handleToggle = (item, isSelected) => {
    const { selectedItems } = this.state;

    this.setState({ selectedItems: isSelected ? selectedItems.filter(ent => ent !== item) : [...selectedItems, item] }); // Toggle if an item is selected
  };

  handleSubmitAndExit = () => {
    const { onSubmit } = this;
    const { selectedItems } = this.state;

    onSubmit(selectedItems); // Pass your selectedItems back to the other screen
    this.props.navigation.goBack(); // And exit the screen
  };

  handleExit = () => {
    this.props.navigation.goBack(); // Exit the screen without calling onSubmit
  };

  renderItem = (item, index) => {
    const { selectedItems } = this.state;

    const isSelected = selectedItems.some(ent => ent === item); // Determine if an item is selected

    return (
      <TouchableOpacity key={index} onPress={() => this.handleToggle(item, isSelected)}>
        <Text>{`${isSelected ? 'X' : 'O'} ${item}`}</Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        {['item1', 'item2', 'item3'].map(this.renderItem)}
        <TouchableOpacity onPress={this.handleSubmitAndExit}>
          <Text>Submit and Exit</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.handleExit}>
          <Text>Exit</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default ItemSelectionScreen;

祝您好运，希望对您有所帮助。

选择项目并将所选项目转移到另一页

2 个答案: