File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useState,useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import ListItem from '../components/ListItem';
// 라디오 버튼 컴포넌트
const RadioButton = ({ options, selectedOption, onSelect }) => {
return (
<View style={{ flexDirection: 'row'}}>
{options.map((option, index) => (
<TouchableOpacity
key={index}
onPress={() => {
onSelect(option,index);
}}
>
<View>
{/* 선택된 옵션에 따라 스타일 변경 */}
<Text
style={{
fontSize: 16,
marginRight: 10,
color: selectedOption === option ? 'blue' : 'black',
}}
>
{option}
</Text>
</View>
</TouchableOpacity>
))}
</View>
);
};
// 예제 앱
const SignatureScreen = () => {
const List0 = [
{
id: 1,
status: '서명진행중', //상태
title: '모바일 구축사업 인수인계 협의2',
department: '수요공급처',
name: 'aaa',
registrationDate: '2023-09-25', //등록 날짜
content: [{
department: '계약운용부',
name: 'aaa',
status: '서명완료',
date: '2023/09/25 15:00'
}, {
department: '발전영업부',
name: 'bbb',
status: '서명완료',
date: '2023/09/25 15:00'
}]
},
{
id: 2,
status: '서명완료', //상태
title: '모바일 구축사업 인수인계 협의1',
department: '수요공급처',
name: 'aaa',
registrationDate: '2023-09-25', //등록 날짜
content: [{department: '발전영업부', name: 'bbb', status: '서명완료', date: '2023/09/25 15:00'}]
},
];
const List1 = [
{
id: 1,
status: '서명진행중', //상태
title: '모바일 구축사업 인수인계 협의2',
department: '수요공급처',
name: 'bbb',
registrationDate: '2023-09-25', //등록 날짜
content: [{
department: '계약운용부',
name: 'aaa',
status: '서명완료',
date: '2023/09/25 15:00'
}, {
department: '발전영업부',
name: 'bbb',
status: '서명완료',
date: '2023/09/25 15:00'
}]
},
{
id: 2,
status: '서명완료', //상태
title: '모바일 구축사업 인수인계 협의1',
department: '수요공급처',
name: 'bbb',
registrationDate: '2023-09-25', //등록 날짜
content: [{department: '발전영업부', name: 'bbb', status: '서명완료', date: '2023/09/25 15:00'}]
},
];
const List2 = [
{
id: 1,
status: '서명진행중', //상태
title: '모바일 구축사업 인수인계 협의2',
department: '수요공급처',
name: 'ccc',
registrationDate: '2023-09-25', //등록 날짜
content: [{
department: '계약운용부',
name: 'aaa',
status: '서명완료',
date: '2023/09/25 15:00'
}, {
department: '발전영업부',
name: 'bbb',
status: '서명완료',
date: '2023/09/25 15:00'
}]
},
];
const options = ['내 기안', '진행 문서', '완료 문서'];
const [selectedOption, setSelectedOption] = useState(null);
const [selectedList, setSelectedList] = useState([]);
useEffect(() => {
if (selectedOption === null && options.length > 0) {
setSelectedOption(options[0]);
setSelectedList(List0);
}
}, []);
// 옵션 선택 시 호출되는 함수
const handleSelect = (option,index) => {
setSelectedOption(option);
// 선택된 옵션에 따라 다른 리스트 데이터를 설정
if (index === 0) {
setSelectedList(List0);
} else if (index === 1) {
setSelectedList(List1);
} else if (index === 2) {
setSelectedList(List2);
}
};
return (
<View>
{/* 라디오 버튼 컴포넌트 사용 */}
<RadioButton
options={options}
selectedOption={selectedOption}
onSelect={handleSelect}
/>
<FlatList
data={selectedList}
renderItem={({item}) => (
<ListItem name="SignatureScreen" item={item} />
)}
windowSize={5}
ListHeaderComponent={View}
ListHeaderComponentStyle={{height: 10}}
/>
</View>
);
};
export default SignatureScreen;