Блог

Главная - Вопросы по программированию - Добавить две кнопки для каждого элемента в flatlist

Добавить две кнопки для каждого элемента в flatlist

#javascript #list #react-native #react-native-flatlist

#javascript #Список #реагировать-родной #react-native-flatlist

Вопрос:

На самом деле я работаю над школьным проектом в react native, и я хочу знать, возможно ли добавить две кнопки в flatlist с помощью react-native.

 
export class ItineraryScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        data:[
                {key: 'PKRX'},
                {key: 'UXUA'},
                {key: 'PGRF'},
            ]
    };
}

render() {
        return (
            <ScrollView>
                    <FlatList
                        data={this.state.data}
                        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
                    />
            </ScrollView>
        );


}

не могли бы вы дать несколько советов по реализации этой функции, пожалуйста?

С наилучшими пожеланиями,

Imad.

Комментарии:

1. Создайте компонент с вашим текстом и вашими кнопками и поместите его в renderItem

Ответ №1:

Вот пример того, как yu мог это сделать (репро на Snack Expo) :

 import * as React from 'react';
import { Text, View, StyleSheet , FlatList, Button} from 'react-native';

export default function App() {
  const data = [
                {key: 'PKRX'},
                {key: 'UXUA'},
                {key: 'PGRF'},
            ];

  return (
    <View>
      <FlatList data={data} renderItem={({item}) => <Item item={item} /> } />
    </View>
  );
}

const Item = ({item}) => {
  return (
    <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
      <Text>{item.key}</Text>
      <View style={{flex:1, flexDirection: 'row-reverse'}}>
        <Butto title='Button 1' onPress={() => {}} />
        <Button title='Button 2' onPress={() => {}} />
      </View>
    </View>
  )
}