react-native-styles-accordion 패키지

react-native-stylish-accordion



심플 스타일리쉬 리액트 네이티브 아코디언

목차


  • Install
  • Usage
  • License

  • 설치




    $ 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,
      },
    });
    


    소품



  • 제목(문자열)

  • titleStyle(텍스트 스타일)

  • iconSize(숫자)

  • headerStyle(뷰스타일)

  • subContainerStyle(ViewStyle)

  • 스타일(ViewStyle)

  • headerComponent(ReactNode)

  • 열기(부울)

  • onPress(무효)

  • timingTransition(숫자 기본값:400) 개방 속도

  • 컨테이너 반경(숫자)
  • 좋은 웹페이지 즐겨찾기