react-native時間軸元件的使用
最近在寫公司的專案,因產品設計需求,需要類似如下的效果,像是一個時間軸
本著不重複造輪子的目標,在最喜歡的github上找尋合適的元件,終於發現了一個非常棒的元件:react-native-step-indicator 使用就非常簡單了 第一步,新增元件依賴,這裡牆裂建議大家使用yarn管理專案依賴
yarn add react-native-step-indicator
第二步,在需要的頁面匯入react-native-step-indicator
import StepIndicator from 'react-native-step-indicator';
第三步,就是定義需要的資料及樣式
const labels = ["填寫認證資訊","資料稽核","認證完成"]; const customStyles = { stepIndicatorSize: 35, currentStepIndicatorSize:40, separatorStrokeWidth: 2, currentStepStrokeWidth: 3, stepStrokeCurrentColor: '#fe7013', stepStrokeWidth: 3, stepStrokeFinishedColor: '#fe7013', stepStrokeUnFinishedColor: '#aaaaaa', separatorFinishedColor: '#fe7013', separatorUnFinishedColor: '#aaaaaa', stepIndicatorFinishedColor: '#fe7013', stepIndicatorUnFinishedColor: '#ffffff', stepIndicatorCurrentColor: '#ffffff', stepIndicatorLabelFontSize: 13, currentStepIndicatorLabelFontSize: 13, stepIndicatorLabelCurrentColor: '#fe7013', stepIndicatorLabelFinishedColor: '#ffffff', stepIndicatorLabelUnFinishedColor: '#aaaaaa', labelColor: '#999999', labelSize: 13, currentStepLabelColor: '#fe7013' }
labels陣列定義的是時間軸上的節點值
第四步,在render函式中新增元件就完事了
<StepIndicator
stepCount={3}
customStyles={customStyles}
currentPosition={this.state.currentPosition}
labels={labels}
/>
currentPosition設定當前時間軸的節點位置,over,來看一下最終的效果
相關推薦
react-native時間軸元件的使用
最近在寫公司的專案,因產品設計需求,需要類似如下的效果,像是一個時間軸 本著不重複造輪子的目標,在最喜歡的github上找尋合適
React-Native開發五 React Native 的Image元件
1 Image元件介紹 RN中Image元件主要用於載入圖片,可載入靜態圖片,網路圖片,以及原生圖片,本地檔案系統中圖片資源 官方參考https://facebook.github.io/react-native/docs/image#resizemode 2 Image元件功
React-Native開發四 React Native 的Touchable元件
1 Touchable元件簡介 Touchable元件是RN的按鈕元件,一共有四大類 TouchableWithoutFeedback:不帶任何反饋的可觸控元件 TouchableHighlight:在TouchableWithoutFeedback的基礎上添加了當按下時背景會變
React Native圖片快取元件
今天介紹一個React Native的圖片快取元件 react-native-rn-cacheimage ,純JS實現,所以相容性很好。 大家都知道,其實React Native 的 Image 元件在 iOS 端實現了快取,而android 端仍未實現,而且,就算實現了 iOS端 ,可能有些需求仍然比較難
React Native 筆記之元件
React Native的元件 什麼是React Native 元件? React Native 都有哪些元件? 建立元件的三種方式 [元件的生命週期](https://react.docschina.org/docs/react-compone
react native的Navigator元件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from 'react-native';import { Navigator } from 'react-native-
react-native react-navigation的用法 react native 導航路由元件react-navigation的使用
一、問題背景 react-navigation是react-native官方推薦的,基於Javascript的可擴充套件且使用簡單的導航,功能強大且完備 回顧一下,react-navigation包含以下功能來幫助我們建立導航器: StackN
React Native關於ScrollableTabView元件
最近工作中使用ScrollableTabView元件的問題,實現如下圖所示的效果: render方法中判斷state中狀態,進行佈局控制 render(){ if(this.state.error){ return(
自己寫的一款jq時間軸元件
效果圖 html <!-- 時間軸 --> <div id="timer-shaft"></div> css .f__clearfix{ *zoom: 1; } .f__clearfix:after{ vis
React Native封裝原生元件釋出到npm
因為一個任務,要寫原生的獲取使用者手機資料夾,實現使用者自定義資料夾的功能,寫好了之後嘗試封裝成元件。1. 首先,有一個rn專案,用Adnroid Studio開啟 android -> app -> build.gradle如圖新建一個 Android Modu
react native 倒計時控制元件
1.npm install //in package.json "dependencies": { "react_native_countdowntimer":"1.0.2" } //in your js code import CountDownTimer fr
React Native常用第三方元件彙總--史上最全
快取管理https://github.com/reactnativecn/react-native-http-cacheListView的優化https://github.com/sghiassy/react-native-sglistview圖片和base64互轉https://github.com/xfu
React Native開發之——元件WebView
前言在開發Android的時候,一般我們會有一些載入網頁的需求,或者執行一些JavaScript,我們都知道在Android中實現這個功能的控制元件是WebView,在ReactNative中也有實現此類需求額的元件,它的名字也是WebView。那麼今天的這篇文章就來詳細說說
React-Native新列表元件FlatList和SectionList學習 | | 聯動列表實現
React-Native在0.43推出了兩款新的列表元件:FlatList(高效能的簡單列表元件)和SectionList(高效能的分組列表元件). http://www.cnblogs.com/shaoting/p/7069312.html 從官方上它們都支援常用
react-native播放視訊元件 react-native-video的用法
它的用法很簡單。 1.安裝 依次執行下面兩個命令, npm i -S react-native-video react-native link (這一步是連線本地視訊庫) (
React Native之Modal元件實現遮罩層效果
React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { Component } from 'react'; import { A
React Native 之Image 元件
1.載入網路圖片 render() { return ( <View style={styles.container} > <Image source={{uri: 'https://facebook.
react-native城市列表元件
城市列表選擇是很多app共有的功能,比如典型的美圖app。那麼對於React Native怎麼實現呢? 要實現上面的效果,首先需要對介面的組成簡單分析,介面的資料主要由當前城市,歷史訪問城市和熱門城市組成,所以我們在提供Json資料的時候就需要將資料分為至
react-native 的 TabBarIOS 元件(底部選擇器)
方法一 : 這是在 react-native 中文官網上的例子,親測功能效果很不錯,推薦使用 1. 建立一個 tabbar.js 檔案 'use strict'; var React = require('re
React Native懸浮效果元件
由於其他的原因,對於React Native相關的內容最近沒有投入太多的關注,從去年年底出版了《React Native移動開發實戰》後,對於React Native的關注就比較少了。最近由於公司之前的專案需要,所以React Native又重新回到我的世界,並