react-native-styles-accordion 패키지
react-native-stylish-accordion
심플 스타일리쉬 리액트 네이티브 아코디언
목차
설치
$ npm install react-native-stylish-accordion
또는
$ yarn add react-native-stylish-accordion
이제 react-native-reanimated 및 react-native-animatable을 설치해야 합니다.
Expo를 사용하는 경우 호환 가능한 버전의 라이브러리를 얻으려면 다음을 실행하십시오.
expo install react-native-reanimated react-native-gesture-handler react-native-redash
Expo를 사용하지 않는 경우 다음을 실행합니다.
yarn add react-native-reanimated react-native-gesture-handler react-native-redash
메모
이것은 "react-native-accordion-view"패키지의 도움으로 생성됩니다.
용법
import StylishAccordion from 'react-native-stylish-accordion'
export default function App() {
const [firstOpen, setFirstOpen] = useState(false);
const [secondOpen, setSecondOpen] = useState(false);
return (
<View style={styles.container}>
<StylishAccordion
open={firstOpen}
title="Click me first"
onPress={() => setFirstOpen(!firstOpen)}
titleStyle={{ fontSize: 18, fontWeight: "bold" }}
headerStyle={[styles.accordionHeader]}
subContainerStyle={[styles.accordionSubContainer]}
timingTransition={150}
iconSize={14}
>
<View>
<Text>You clicked me thanks for testing this package, this is my first package, do give it a start in GitHub</Text>
</View>
</StylishAccordion>
<StylishAccordion
open={secondOpen}
title="Click me first not that"
onPress={() => setSecondOpen(!secondOpen)}
titleStyle={{ fontSize: 18, fontWeight: "bold" }}
headerStyle={[styles.accordionHeader]}
subContainerStyle={[styles.accordionSubContainer]}
timingTransition={150}
iconSize={14}
>
<View>
<Text>You clicked me thanks for testing this package, this is my first package, do give it a start in GitHub</Text>
</View>
</StylishAccordion>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
accordionHeader: {
backgroundColor: "#ff9d9d",
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
marginLeft: 5,
marginRight: 5,
marginBottom: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 8,
},
accordionSubContainer: {
backgroundColor: "#fff",
marginLeft: 5,
marginRight: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 8,
marginBottom: 13,
},
});
소품
$ npm install react-native-stylish-accordion
$ yarn add react-native-stylish-accordion
expo install react-native-reanimated react-native-gesture-handler react-native-redash
yarn add react-native-reanimated react-native-gesture-handler react-native-redash
import StylishAccordion from 'react-native-stylish-accordion'
export default function App() {
const [firstOpen, setFirstOpen] = useState(false);
const [secondOpen, setSecondOpen] = useState(false);
return (
<View style={styles.container}>
<StylishAccordion
open={firstOpen}
title="Click me first"
onPress={() => setFirstOpen(!firstOpen)}
titleStyle={{ fontSize: 18, fontWeight: "bold" }}
headerStyle={[styles.accordionHeader]}
subContainerStyle={[styles.accordionSubContainer]}
timingTransition={150}
iconSize={14}
>
<View>
<Text>You clicked me thanks for testing this package, this is my first package, do give it a start in GitHub</Text>
</View>
</StylishAccordion>
<StylishAccordion
open={secondOpen}
title="Click me first not that"
onPress={() => setSecondOpen(!secondOpen)}
titleStyle={{ fontSize: 18, fontWeight: "bold" }}
headerStyle={[styles.accordionHeader]}
subContainerStyle={[styles.accordionSubContainer]}
timingTransition={150}
iconSize={14}
>
<View>
<Text>You clicked me thanks for testing this package, this is my first package, do give it a start in GitHub</Text>
</View>
</StylishAccordion>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
accordionHeader: {
backgroundColor: "#ff9d9d",
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
marginLeft: 5,
marginRight: 5,
marginBottom: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 8,
},
accordionSubContainer: {
backgroundColor: "#fff",
marginLeft: 5,
marginRight: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 8,
marginBottom: 13,
},
});
제목(문자열)
titleStyle(텍스트 스타일)
iconSize(숫자)
headerStyle(뷰스타일)
subContainerStyle(ViewStyle)
스타일(ViewStyle)
headerComponent(ReactNode)
열기(부울)
onPress(무효)
timingTransition(숫자 기본값:400) 개방 속도
컨테이너 반경(숫자)
Reference
이 문제에 관하여(react-native-styles-accordion 패키지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/radhakishanjangid404/react-native-stylish-accordion-2279텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)