Как создать ряд из 3 изображений до n-го изображения, а последнее изображение должно иметь значок +, чтобы загрузить новое изображение? - PullRequest
Новая
       25

Как создать ряд из 3 изображений до n-го изображения, а последнее изображение должно иметь значок +, чтобы загрузить новое изображение?

0 голосов
/ 09 октября 2019

Мне нужна кнопка + в конце всех изображений, в случае 1 на экране должна быть только эта 1 кнопка, если изображение недоступно, а в остальных случаях после доступных изображений эта кнопка будет на последнем из всех изображений, ноЯ хочу, чтобы эта кнопка выглядела так же, как эти изображения, а также в строке 3. Мой код для плоского списка приведен ниже. 

  <FlatList
       numColumns={3}
       data={this.state.images}
       renderItem={({ item }) => <SafeAreaView style={{ flex: 1, alignItems: 'center' }}>
            <Image style={{ margin: 5, height: 120, width: 120 }} 
                   source={{ uri:'data:image/png;base64,' + item.image }} />
                   </SafeAreaView>}
       keyExtractor={item => item.id}
                    />

Ответы [ 3 ]

1 голос
/ 09 октября 2019

Вам просто нужно условно отобразить FlatList и добавить кнопку в той же «строке», что и изображения.

Я хочу, чтобы эта кнопка выглядела так же, как эти изображения

Стиль зависит от вас:)

Вот немного демо как это будет работать. 

import React, { Component } from "react";
import {
  Button,
  StyleSheet,
  Text,
  View,
  FlatList,
  SafeAreaView
} from "react-native";

const data = [{ name: "first" }, { name: "second" }, { name: "third" }];

class App extends Component {
  renderFlatList() {
    const Item = ({ title }) => {
      return (
        <SafeAreaView style={styles.listItem}>
          <Text style={{ padding: 10 }}>{title}</Text>
        </SafeAreaView>
      );
    };
    return (
      <View>
        <FlatList
          numColumns={3}
          data={data}
          renderItem={({ item }) => ( <Item title={item.name} />)}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
  render() {
    return (
      <View style={styles.container}>
        {/* You probably are using state or props for the data, so this checking is just for the demo */}
        {typeof data !== "undefined" && data.length > 0 && this.renderFlatList()}
        <View>
          {/* You could use <TouchableHighlight /> or whatever suits your needs*/}
          <Button title={"+"} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row"
  },
  listItem: {
    backgroundColor: "gold",
  }
});

export default App;
0 голосов
/ 09 октября 2019 
<FlatList
  numColumns={3}
  data={this.state.images}
  renderItem={({ item }) => <SafeAreaView style={{ flex: 1, alignItems: 'center' }}>
    {(item.index + 1) % 3 == 0 ?
  <TouchableOpacity onPress={() => { }}><Image style={{ margin: 5, height: 120, width: 120 }}
    source={{ uri: 'data:image/png;base64,' + item.image }} />
    {/* you can put your + icon image here */}
  </TouchableOpacity>
  :
  <Image style={{ margin: 5, height: 120, width: 120 }}
    source={{ uri: 'data:image/png;base64,' + item.image }} />
}
</SafeAreaView>}
keyExtractor={item => item.id}
/>
0 голосов
/ 09 октября 2019

Вы можете поместить + в диапазон, положение которого является абсолютным, и обернуть в него последнее изображение. Здесь есть еще стили, но это начало.

Функция, которая добавляет изображение, должна удалить оболочку span из старого последнего изображения и добавить ее к новому

...