React native 之android的圖示和啟動圖片
阿新 • • 發佈:2019-01-31
哎哎呀呀,上篇說到了react native的IOS的圖示和啟動圖片的設定,其實最主要的是尺寸!相應的尺寸設定好了以後就不會報錯了!
ok~這篇說的是React native的android的圖示和啟動頁面!!!!!
1.圖示:
其實android的圖示設定很簡單,一般情況下只需要替換就可以了(當然你也可以不去替換,在資源管理的R.java裡面設定也可以,這裡不建議)
注意的是在res的檔案下的圖片的命名不能出現改變,還有就是他每個尺寸也應該按照規定設定!!!
2.啟動頁:
在react-native的android中的啟動圖和IOS不相同點在於,android沒有預設的啟動圖,(在IOS裡面有,詳情見上篇文章),那就需要我們用js自己編寫程式去實現這張啟動頁:
思路:在android.js裡面給入口元件包裝導航-----在啟動頁中設定定時器,在頁面渲染結束後的2s後執行repalce()跳轉函式跳轉到主頁面,啟動頁面的核心程式碼如下:
123456789101112131415161718192021222324252627 | export default class Lang extends Component { render(){ return ( <View style={styles.container}> <Image source={require( './img/lang.png' )} style={styles.ig}/> </View> ) } //在UI初始化渲染結束後,系統自動呼叫此函式。主要是用於定時器、網路請求 componentDidMount(){ //設定定時器,相隔2s後切換到主頁面 setTimeout( ()=>{ //頁面的切換,用到無縫切換函式replace // console.log('aa') //ok !既然我們需要跳轉~那麼問題來了~我們需要給元件包裝一個導航器。注意:一個APP只有一個導航器,即使導航裡面的元件頁面又存在導航,系統的diff演算法只會認定後面的導航,也就是還是一個導航 //我們在andorod.js 目錄裡面給lang 元件包裝一個導航器,然後就可以使用下面的函式啦~ this .props.navigator.replace( { component:Nav, //切換到具體的板塊 } ) },1000 ); } } |
在android頁面裡包裝導航: