react-native-app-intro 實現視差動畫的 App 導覽組件



  • 這是一個實現視差動畫的 App 導覽組件,可以很方便的使用
    直接上 Github Code 傳送門
    Demo

    也可以快速的客製化想要的畫面長怎樣如下方 Sample code

    高級Demo

    <AppIntro>
      <View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
        <View level={10}><Text style={styles.text}>Page 1</Text></View>
        <View level={15}><Text style={styles.text}>Page 1</Text></View>
        <View level={8}><Text style={styles.text}>Page 1</Text></View>
      </View>
      <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
        <View level={-10}><Text style={styles.text}>Page 2</Text></View>
        <View level={5}><Text style={styles.text}>Page 2</Text></View>
        <View level={20}><Text style={styles.text}>Page 2</Text></View>
      </View>
      <View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
        <View level={8}><Text style={styles.text}>Page 3</Text></View>
        <View level={0}><Text style={styles.text}>Page 3</Text></View>
        <View level={-10}><Text style={styles.text}>Page 3</Text></View>
      </View>
      <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
        <View level={5}><Text style={styles.text}>Page 4</Text></View>
        <View level={10}><Text style={styles.text}>Page 4</Text></View>
        <View level={15}><Text style={styles.text}>Page 4</Text></View>
      </View>
    </AppIntro>
    

    如果你不想要自定義 View 也可以直接塞陣列進去
    Array

    class Example extends Component {
      render() {
        const pageArray = [{
          title: 'Page 1',
          description: 'Description 1',
          img: 'https://goo.gl/Bnc3XP',
          imgStyle: {
            height: 80 * 2.5,
            width: 109 * 2.5,
          },
          backgroundColor: '#fa931d',
          fontColor: '#fff',
          level: 10,
        }, {
          title: 'Page 2',
          description: 'Description 2',
          img: 'https://goo.gl/GPO6JB',
          imgStyle: {
            height: 93 * 2.5,
            width: 103 * 2.5,
          },
          backgroundColor: '#a4b602',
          fontColor: '#fff',
          level: 10,
        }];
        return (
          <AppIntro
            onNextBtnClick={this.nextBtnHendle}
            onDoneBtnClick={this.doneBtnHandle}
            onSkipBtnClick={this.onSkipBtnHandle}
            onSlideChange={this.onSlideChangeHandle}
            pageArray={pageArray}
          />
        );
      }
    }
    


  • wow,欢迎台湾同胞。这个只能全屏吗?能否替代react-native-swiper呢?



  • 恩對 目前只能全屏,我想不能替代 react-native-swiper ,react-native-swiper 比較像是通用型的ViewPager ,我這個 component 專注於 App 導覽的部分,可以快速的建立 App 的介紹不用再用 swiper 做一個輪子