国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 react-native-simple-router 組織你的React Native 頁面

wawor4827 / 2583人閱讀

摘要:是一款第三方導航組件。你可以通過它進行合理的視圖組織。使用修改的你的如果是修改對應文件即可。請記住必須在頂級路由中使用,如果你的鏈接潛入在多個組件中,你必須確保它能夠冒泡到它的父級。其他組件推薦本文同步自己的博客

React Native Simple Router是一款第三方導航組件。你可以通過它進行合理的視圖組織。

項目地址

安裝

進入你的項目目錄,如過沒有初始化項目可以react-native init your_project,然后在項目目錄安裝react-native-simple-router

 npm install react-native-simple-router --save
使用
import Router from "react-native-simple-router";

修改的你的index.ios.js,如果是Android修改對應文件即可。

import React, { StyleSheet } from "react-native";

// 初始化頁面
class HelloPage extends React.Component {

  render() {
    return Hello world!;
  }

}

const styles = StyleSheet.create({
  header: {
    backgroundColor: "#5cafec",
  },
});

// 在這里定義你的路由
// - 其中name 將會成會頂部導航條的標題內容
// - `component`用于渲染頁面的組件
const firstRoute = {
  name: "Welcome!",
  component: HelloPage,
};

class MyApp extends React.Component {

  render() {
    return (
      
    );
  }
}

AppRegistry.registerComponent("routerTest", () => MyApp);

接下來你可以加入更多頁面,你可以通過this.props.toRoute()導航至另外一個組件

我們定義另外一個頁面next.js,代碼很簡單:

"use strict";

var React = require("react-native");

var {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    Component
} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
});

class Next extends Component {
    constructor(props){
        super(props);
    }
    
    render() {
        var me = this;
        return (
          
            
              Welcome to Next Page!
            
          
        );
  }
}


module.exports = Next;

index.ios.js中主要加入下面方法

import React, { StyleSheet, PropTypes } from "react-native";
var Next = require("./next");
const propTypes = {
  toRoute: PropTypes.func.isRequired,
};

class HelloPage extends React.Component {

  constructor(props) {
      super(props);

      this.nextPage = this.nextPage.bind(this);
  }

  nextPage() {
    this.props.toRoute({
      name: "next screen",
      component: Next
    });
  }

  render() {
    return (
      
        
          Next page please!
        
      
    );
  }
}

HelloPage.propTypes = propTypes;

這個時候我們點擊 next page 即可導航至next頁面。請記住this.props.toRoute()必須在頂級路由中使用,如果你的鏈接潛入在多個組件中,你必須確保它能夠冒泡到它的父級。

配置

可以配置下面的屬性:

firstRoute(必須): 你導航的首頁

headerStyle: 改變你導航條的背景樣式

titleStyle:改變導航條里的文字樣式

bgStyle: 改變所有路由的背景樣式

borderBottomWidth: 底部導航條的寬度

backButtonComponent:默認導航條會呈現一個back 文本的返回按鈕,當然你可以自定義設置的組件

customAction:

hideNavigationBar: 隱藏導航條

statusBarProps:默認獲取狀態欄的props,可以參考StatusBar Docs.
+

this.props.toRoute()需要傳入一個對象作為參數設置 。

name:路由的名稱,也會被用在導航條的文本顯示

component(必須):需要渲染的組件

leftCorner: 從導航左邊開始開始渲染

rightCorner:則是從右邊渲染相關組件

titleComponent:指定一個組件用于替換標題,類似Ins的第一頁

headerStyle: 指定新渲染組件的導航條樣式,你可以指定一個背景色,然后路由轉換是會平滑過渡

passProps:帶入一組參數,通常是一個對象key-value給新的組件

titleProps:如果你設置了title為一個組件,這樣你可以把titleProps的值傳入進去。

sceneConfig:控制轉場動畫,常見的參數如下:

Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.PushFromRight
Navigator.SceneConfigs.VerticalDownSwipeJump
Navigator.SceneConfigs.VerticalUpSwipeJump

更多屬性參考可以參閱這里

this.props.replaceRoute的參數設置和toRoute一致,但是二者的區別在于toRoute會加入到你的堆棧中,而replaceRoute它將會替換當前所在的路由。

如果你是在登錄或者登出的功能,使用replaceRoute會好過直接再導航至該路由。

this.props.resetToRoutetoRoute()傳入的參數一致,而它的差異在于,它會替換掉當前的路由并且清空導航。如果你登錄成功或者注冊成功后,你并不希望退后,使用resetToRoute則會非常有用。

案例 Twitter App

一個簡單的模仿twitter 的 應用,你可以直接使用它,并借鑒它的寫法。

import React, { AppRegistry } from "react-native";
import TwitterApp from "./node_modules/react-native-simple-router/examples/twitter-example";

AppRegistry.registerComponent("routerTest", () => TwitterApp);
Explorer app

node_modules/react-native-simple-router/examples/Explorer里面還有一個Demo,安裝依賴后便可以運行.

我們可以大致參考作者的目錄架構

+ images/
+ style
    + css
    + icons
+ components
+ service
+ pages
+ ios
+ android
- index.ios.js 
- index.android.js
...
反饋

react-native-simple-router實際來源于react-native-router,但是作者不再更新,因此我們遷移過來,不過你依舊可以在原來issues找到你有可能遇到的問題的答案。

其他組件推薦

React-Native-Router

React-Native-Button

react-native-gifted-listview

react-native-scrollable-tab-view

本文同步自己的博客:http://www.jackpu.com/shi-yong-react-native-simple-router-zu-zhi-ni-de-react-native-ye-mian/

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79003.html

相關文章

  • React Native 開發小Tips

    摘要:除此之外,部分頁面,其實完全可以由網頁去支持多端共用的功能,樓主親身遇到過的場景,就是圖表的繪制,我們的方案是一個頁面,需要微信,手機網頁,和都具備該功能,而且我們手機網頁和客戶端打開的稍微有區別,需要隱藏。 showImg(https://segmentfault.com/img/bVzxDW); 相信好多寫React Native的都是前端出身,當然遇見問題的,也很多時候會想從前端...

    kevin 評論0 收藏0
  • 翻譯 | 從 ReactJS 到 React-Native—兩者的主要差異是什么?

    摘要:跟非常相似,但是在開始嘗試你第一個之前,也需要了解兩者之間的一些差異。推薦的方式是使用提供的。能用到組件中的或者上以啟用這個組件的觸摸事件。 華翔,Web前端開發工程師著作權歸作者所有,轉載請聯系作者獲得授權。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已經誕生有兩年左右了,自從適配了An...

    darkerXi 評論0 收藏0
  • 來聊聊怎么寫react-native上的樣式吧

    摘要:我們來看看文檔上是怎么說的吧在中,你并不需要學習什么特殊的語法來定義樣式。我們仍然是使用來寫樣式。這些樣式名基本上是遵循了上的的命名,只是按照的語法要求使用了駝峰命名法,例如將改為。 我遇到了什么問題? 不久之前我重構了一個古老的項目,總結了一些js方面的想法,不過對于一個前端項目而言不僅僅只由js組成的嘛,上學的時候老師和我說HTML+CSS+JS對應的是頁面的骨架、皮膚和肌肉。既然...

    Dionysus_go 評論0 收藏0

發表評論

0條評論

wawor4827

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<