React Native內置屏幕

在React Native應用程序上實現Onboarding（或Welcome）屏幕的最佳方式是什麼？屏幕必須有滑塊視圖才能在介紹性點和某些系統之間滑動以存儲「顯示一次」標誌。我可以看到如何用香草代碼來實現它，但可能存在完整的組件？React Native內置屏幕

來源

2016-03-02 vtambourine

我沒有找到任何自定義的一體化組件，但我認爲ViewPagerAndroid和AsyncStorage的組合可以不費吹灰之力就可以實現（兩個類都來自react-native包）。

例如，對於滑塊視圖，你可以這樣創建組件：

import React, { Component, ViewPagerAndroid, View, Text } from 'react-native'; 

export default class Onboarding extends Component { 

    render() { 

     return (
      <ViewPagerAndroid style={{ flex: 1 }} initialPage={0}> 
      <View style={{alignItems: 'center', padding: 20}}> 
       <Text>First page</Text> 
      </View> 
      <View style={{alignItems: 'center', padding: 20}}> 
       <Text>Second page</Text> 
      </View> 
      </ViewPagerAndroid> 
     ); 

    } 

}

，然後在「顯示一次」標誌，你可以處理它在你的主要應用程序的成分是這樣的：

componentDidMount() { 

    AsyncStorage.getItem('onboarding').then((val) => { 

    if (!val) { 
     this.setState({ onboarding: 'pending' }); 
     AsyncStorage.setItem('onboarding', 'done').done(); 
    } else { 
     this.setState({ onboarding: val }); 
    } 

    }).done(); 

} 

render() { 

    switch (this.state.onboarding) { 
    case 'pending': return (<Onboarding />); 
    case 'done': return (<Home />); 
    default: return (<Loading />); 
    }; 

}

此代碼僅在首次執行應用程序時顯示Onboarding組件。您也可以在滑塊最後一個視圖內的按鈕的clic處理程序中將該標誌設置爲「完成」，以便在用戶未完成第一次運行時重複啓動，這取決於您。

如果您還需要在iOS版本，你可以使用<ScrollView pagingEnabled={true}>代替ViewPagerAndroid

來源

2016-03-13 15:29:21 scarmuega

在側面說明。如果你打算更多地使用'AsyncStorage'，我會建議使用[react-native-simple-store]（https://www.npmjs.com/package/react-native-simple-store）。它包裝了'AsyncStorage'的基本功能，並自動爲您提供JSON.stringify和JSON.parse的值。 FWIW。 – jasonmerino

我覺得react-native-app-intro幾乎是你想要的。它給出了一個基本的尋呼機，默認情況下有一些不錯的下一個和完成按鈕，但是您可以爲每個頁面中的元素添加額外的轉換效果。

來源

2016-08-02 16:45:30 blackxored

感謝您發佈此信息。幾天前當我最初看的時候不在這裏。 :) –

是的，存在完整的組件：https://github.com/jfilter/react-native-onboarding-swiper。（我是作者）

在最基本的情況下，您爲每個頁面提供圖像，標題和副標題。

爲了保存國旗，請使用AsyncStorage。啓動主屏幕時，請檢查標誌並導航到「入門」屏幕。完成後，設置標誌並導航到主屏幕。參見例如：

async componentWillMount() { 
    const value = await AsyncStorage.getItem('@SKIP_INTRO'); 
    if (value === null || value !== 'true') { 
    this.props.navigateToIntro(); 
    } 
}

來源

2017-10-18 21:47:16

react-native-app-intro是入職的熱門選擇，但它不再是積極維護。所以我建議你去react-native-app-intro-slider，前一個支持最新的React Naive的修改版本。

但是，您應該使用AsyncStorage自己處理首次啓動設置。

下面的問題將幫助您檢測並設置首次啓動。

How to detect first launch in react-native

來源

2018-02-13 05:48:33

React Native內置屏幕

回答

相關問題