[React Native] scrollview

React 목록

 

import React, {useState} from 'react';
import {View, Text, StyleSheet, Button, ScrollView} from 'react-native';

interface State {
  name: string;
}

export default function App() {
  const [companies, setCompany] = useState<State[]>([
    {name: 'google'},
    {name: 'samsung'},
    {name: 'microsoft'},
    {name: 'facebook'},
    {name: 'apple'},
  ]);

  const add = () => {
    const newCompany = {name: 'newCompany'};
    setCompany(prevArray => [...prevArray, newCompany]);
  };
  const remove = (name: string) => {
    setCompany(prevArray => prevArray.filter(item => item.name !== name));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Company</Text>
      <ScrollView>
        {companies.map((company, index) => {
          return (
            <View style={styles.text} key={index}>
              <Text>{company.name}</Text>
              <Button title="삭제" onPress={() => remove(company.name)} />
            </View>
          );
        })}
        <Button title="추가" onPress={add} />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  title: {
    fontSize: 20,
    padding: 10,
  },
  text: {
    backgroundColor: '#eee',
    padding: 10,
    margin: 10,
  },
});

 

 

React 목록