react native 開發APP（五）頁面跳轉，帶參數跳轉，導航條，導航條按鈕

react native 頁面跳轉

官網 https://reactnative.cn/

項目下載地址：https://github.com/hebiao6446/DemoProject
陸續更新中。。。

從A頁面push到B頁面的前提是

React native	iOS	Android
StackNavigator	UINavigationController	Activity

總結就是頁面push都是以棧爲基礎，當然iOS也有其他的跳轉方式這裏在這裏就不解釋了，後面會詳細說到

1.react native 從A頁面跳轉到B頁面

先上效果

注意看下，這裏的第二個頁面是沒有BottomTabbar的，也就是沒有底欄的四個按鈕，但是不排除個別SB的產品需要第二個頁面有四個按鈕，那咋搞了？？

這個很簡單，我把代碼貼出來就可以

import BaseComponet from "./BaseComponet";
import {Image, StyleSheet, View, Button, TouchableOpacity} from "react-native";
import React from "react";
import {createStackNavigator} from "react-navigation-stack";
import HbColor from "../utils/HbColor";
import NewPushView from "./NewPushView";
class FirstView  extends BaseComponet{
    render(){
        return (
            <View style={styles.contain}>

                <TouchableOpacity onPress={
                    () => {
                        const {navigate} = this.props.navigation;
                        navigate("NewPush");
                    }
                } >
                    <View style={{width: 100,height: 50,backgroundColor:"#0ff000aa"}} ></View>
                </TouchableOpacity>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    contain:{
        backgroundColor:'#ff000022',
        flex:1,
    },

});
const FirstNavi = createStackNavigator({
    First: {
        screen: FirstView,
        navigationOptions: {
            title: '第一頁',
            headerStyle: {
                backgroundColor: HbColor.COLOR_e85b53,
            },
            headerTintColor: '#ffffff',
            // headerRight:
        },
    },
    NewPush:{
        screen: NewPushView,
        navigationOptions: {
            title: '新頁面',
            headerStyle: {
                backgroundColor: HbColor.COLOR_3D8BAA,
            },
            headerTintColor: '#ffffff',
            // headerRight:
        },
    }
}, {
    navigationOptions: ({
                            navigation
                        }) => ({
        //如果第二個頁面還需要底部的四個按鈕，那麼把下面段代碼註釋掉
        tabBarVisible: navigation.state.index > 0 ? false : true,
    })
});

export default FirstNavi;

有一點我們要主頁的是，比如從A頁面跳轉到B頁面，那麼AB兩個頁面都必須在 createStackNavigator 這個裏面註冊下也就是 你需要把所有頁面的路由註冊一遍
跳轉的核心代碼

  const {navigate} = this.props.navigation;
  navigate("NewPush");

如果你是剛開始接觸react native，你會好奇爲啥不用按鈕(Button)了？要用這TouchableOpacity ,這裏我說下控件與佈局相關的東西請自行百度

NewPush 這個東西就是你註冊路由時的名稱

NewPush:{
        screen: NewPushView,
        navigationOptions: {
            title: '新頁面',
            headerStyle: {
                backgroundColor: HbColor.COLOR_3D8BAA,
            },
            headerTintColor: '#ffffff',
            // headerRight:
        },
    }

底欄是否需要隱藏請自便

navigationOptions: ({
                            navigation
                        }) => ({
        //如果第二個頁面還需要底部的四個按鈕，那麼把下面段代碼註釋掉
        tabBarVisible: navigation.state.index > 0 ? false : true,
    })

2.react native 從A頁面跳轉到B頁面，帶參數

帶參數傳遞其實挺簡單，但是其實就是在不帶參數的後面加個參數

 let data = {name:'金三pang'};
 const {navigate} = this.props.navigation;
 navigate("NewPush",data);

比如我需要傳遞一個name到第二個頁面，我只需要把name封裝下就可以，這是傳遞挺簡單的，那麼如何獲取了？？我們到第二個頁面操作下
先看效果

上代碼

import BaseComponet from "./BaseComponet";
import {Image, StyleSheet, View,Button,Text} from "react-native";
import React from "react";
import {createStackNavigator} from "react-navigation-stack";
import HbColor from "../utils/HbColor";
export default class NewPushView  extends BaseComponet{

    constructor(pros){
        super(pros);
        this.state = {
            npName:'',
        };
    }
    render(){
        return (
            <View style={styles.contain}>
                <Text>{this.state.npName}</Text>
            </View>
        );
    }
    componentDidMount(): void {
        let name = this.props.navigation.state.params.name;
        this.setState({
            npName:name,
        })
    }
}
const styles = StyleSheet.create({
    contain:{
        backgroundColor:'#00ff0022',
        flex:1,
    },
});

這裏是獲取上個頁面參數的關鍵

  let name = this.props.navigation.state.params.name;

3.react native 導航欄的配置

先看代碼

const FourthNavi = createStackNavigator({
    Fourth: {
        screen: FourthView,
        navigationOptions: {
            title: '第4頁',
            headerStyle: {
                backgroundColor: HbColor.COLOR_e85b53,
            },
            headerTintColor: '#ffffff',
        },
    },
}, {
    navigationOptions: ({
                            navigation
                        }) => ({
        tabBarVisible: navigation.state.index > 0 ? false : true,
    })
});

在看效果

在解釋說明

屬性	取值	說明
title	string	標題
headerTitle	string	標題
headerTitleAlign	‘left’ , ‘center’	標題對齊方式
headerTitleStyle	React.ComponentProps	標題樣式
headerTitleContainerStyle	StyleProp	標題內容樣式
headerTintColor	string	設置導航欄顏色
headerTitleAllowFontScaling	boolean	標題允許字體縮放
headerBackAllowFontScaling	boolean	返回允許字體縮放
headerBackTitle	string	返回文字按鈕標題
headerBackTitleStyle	StyleProp	返回文字按鈕樣式
headerBackTitleVisible	boolean	返回按鈕是否可見
headerTruncatedBackTitle	string	標題被截斷的後標題
headerLeft	React.ReactNode	左邊Itembar樣式
headerLeftContainerStyle	StyleProp	標題左容器樣式
headerRight	React.ReactNode	右邊Itembar樣式
headerRightContainerStyle	StyleProp	標題右容器樣式
headerBackImage	‘backImage’	返回按鈕自定義圖片
headerPressColorAndroid	string	標題按顏色Android
headerBackground	React.ReactNode	標題背景
headerStyle	StyleProp	標題樣式
headerTransparent	boolean	標題透明
headerStatusBarHeight	number	標題狀態欄高度

上面有幾個屬性對於初學者來說比較操蛋
React.ReactNode 這個可以理解爲任意View

StyleProp 這個裏面包含了很多屬性，具體看下錶

屬性	說明
alignContent	對齊內容
alignItems	對齊項
alignSelf	對齊自身
aspectRatio	白點
backfaceVisibility	背面可見度
backgroundColor	背景顏色
borderBottomColor	邊框底色
borderBottomEndRadius	邊界底端半徑
borderBottomLeftRadius	邊界底部左半徑
borderBottomRightRadius	邊界右下半徑
borderBottomStartRadius	邊界左上半徑
borderBottomWidth	邊界底部寬度
borderColor	邊界顏色
borderEndColor	邊框顏色
borderEndWidth	邊框寬度
borderLeftColor	邊框顏色左
borderLeftWidth	邊框寬度左
borderRadius	邊界半徑
borderRightColor
borderRightWidth
borderStartColor
borderStartWidth
borderStyle
borderTopColor
borderTopEndRadius
borderTopLeftRadius
borderTopRightRadius
borderTopStartRadius
borderTopWidth
borderWidth
bottom
color
decomposedMatrix	分解矩陣
direction	方向
display	顯示
elevation
end
flex
flexBasis
flexDirection
flexGrow
flexShrink
flexWrap
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
height
includeFontPadding
justifyContent
left
letterSpacing
lineHeight
margin
marginBottom
marginEnd
marginHorizontal
marginLeft
marginRight
marginStart
marginTop
marginVertical
maxHeight
maxWidth
minHeight
minWidth
opacity
overflow
overlayColor
padding
paddingBottom
paddingEnd
paddingHorizontal
paddingLeft
paddingRight
paddingStart
paddingTop
paddingVertical
position
resizeMode
right
rotation
scaleX
scaleY
shadowColor
shadowOffset
shadowOpacity
shadowRadius
start
textAlign
textAlignVertical
textDecorationColor
textDecorationLine
textDecorationStyle
textShadowColor
textShadowOffset
textShadowRadius
textTransform
tintColor
top
transform
transformMatrix
translateX
translateY
width
writingDirection
zIndex

這裏只用到 backgroundColor,其他屬性就不一一介紹了

 headerStyle: {
                backgroundColor: HbColor.COLOR_e85b53,
   },

一波導航條的屬性介紹到這裏了，我們來自定義下導航條上面的按鈕

4.react native 導航欄的上面的按鈕設置

我們先看效果

然後看代碼

import React, {Component} from 'react';
import {Image, TouchableOpacity,Text} from "react-native";

export default class LeftItemBar extends Component{
    constructor(pros) {
        super(pros)
    }
    render(){
        return <TouchableOpacity onPress={()=>{
            alert("xx");
        }} ><Text style={{color:'white'}}>編輯</Text></TouchableOpacity>
    }
}

左右兩邊的按鈕

import React, {Component} from 'react';
import {
    Alert,
    Image,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from "react-native";
import HbImages from "../utils/HbImages";
export default class RightItemBar extends Component{
    render(){
        return <TouchableOpacity><Image style={{backgroundColor:''}} source={HbImages.bar_item_sc}/></TouchableOpacity>

    }
}

然後就是把按鈕弄到導航條上。。。

import BaseComponet from "./BaseComponet";
import {Image, StyleSheet, View,Text} from "react-native";
import React from "react";
import {createStackNavigator} from "react-navigation-stack";
import HbColor from "../utils/HbColor";

import RightItemBar from "../subview/RightItemBar";
import LeftItemBar from "../subview/LeftItemBar";
import FourEditView from "./FourEditView";
 class FourthView  extends BaseComponet{

    render(){
        return (
            <View style={styles.contain}>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    contain:{
        backgroundColor:'#00ff0022',
        flex:1,
    },
});
const FourthNavi = createStackNavigator({

    Fourth: {
        screen: FourthView,
        navigationOptions: (navigation) => ({
            title: '第4頁',
            headerStyle: {
                backgroundColor: HbColor.COLOR_e85b53,
            },
            headerTintColor: '#ffffff',
            headerRight:<RightItemBar/>,
            headerLeft:<LeftItemBar />
        }),
    },
    EditView:{
        screen: FourEditView,
        navigationOptions: ({navigation}) => ({
            title: '編輯頁',
            headerStyle: {
                backgroundColor: HbColor.COLOR_ffffff,
            },
            headerTintColor: '#aa02a4',
        }),
    }
}, {
    navigationOptions: ({
                            navigation
                        }) => ({
        tabBarVisible: navigation.state.index > 0 ? false : true,
    })
});

export default FourthNavi;

這裏是設置導航條按鈕的地方

headerRight:<RightItemBar/>,
headerLeft:<LeftItemBar />

5.react native 導航欄標題修改

我們之前說到設置導航條上面的文字，按鈕等等東西，但是我們發現一個問題，先看代碼

const FirstNavi = createStackNavigator({
    First: {
        screen: FirstView,
        navigationOptions: {
            title: '第一頁',
            headerStyle: {
                backgroundColor: HbColor.COLOR_e85b53,
            },
            headerTintColor: '#ffffff',
        },
    },
    NewPush:{
        screen: NewPushView,
        navigationOptions: {
            title: '新頁面',
            headerStyle: {
                backgroundColor: HbColor.COLOR_3D8BAA,
            },
            headerTintColor: '#ffffff',
            // headerRight:
        },
    }
}, {
    navigationOptions: ({
                            navigation
                        }) => ({
        //如果第二個頁面還需要底部的四個按鈕，那麼把下面段代碼註釋掉
        tabBarVisible: navigation.state.index > 0 ? false : true,
    })
});

export default FirstNavi;

也就是這裏面的標題是在createStackNavigator這個裏面設置的，設想下場景，如果需要動態標題了？？？如果標題是根據上個頁面來的了？那不就瞎了嗎？
更多的時候我們需要在當前頁面設置自己頁面的標題 或者設置動態標題，你想過的react native肯定想過，多了不解釋，直接上代碼

import BaseComponet from "./BaseComponet";
import {Image, StyleSheet, View, Button, TouchableOpacity} from "react-native";
import React from "react";
import {createStackNavigator} from "react-navigation-stack";
import HbColor from "../utils/HbColor";
import NewPushView from "./NewPushView";
class FirstView  extends BaseComponet{
    render(){
        return (
            <View style={styles.contain}>
                <TouchableOpacity onPress={
                    () => {
                        let data = {name:'金三pang'};
                        const {navigate} = this.props.navigation;
                        navigate("NewPush",data);
                    }
                } >
                    <View style={{width: 100,height: 50,backgroundColor:"#0ff000aa"}} ></View>
                </TouchableOpacity>
            </View>
        );
    }
    static navigationOptions = ({navigation,screenProps}) =>  {
        return ({
            headerTitle:"動態標題",
        })
    }
}

react native 提供了靜態的屬性（方法）navigationOptions 那麼這裏面有新的問題了，在大部分語言中，非靜態可以調用靜態，但是靜態方法無法直接調用非靜態
如果，我需要動態改變導航條標題的話，改如何弄了？顯然不能通過直接獲取state，我們看下這裏面其實有兩個參數

 static navigationOptions = ({navigation,screenProps})

基本可以斷定我們要的東西從這裏面來的。
先看效果，再貼代碼一目瞭然

效果不解釋了。。。。直接上代碼

import BaseComponet from "./BaseComponet";
import {Image, StyleSheet, View, Button, TouchableOpacity,Text} from "react-native";
import React from "react";
import {createStackNavigator} from "react-navigation-stack";
import HbColor from "../utils/HbColor";
import NewPushView from "./NewPushView";
import LeftItemBar from "../subview/LeftItemBar";


class FirstView  extends BaseComponet{
    constructor() {
        super();
        this.state = {
          fvName:"動態標題1",
        };
    }
    render(){
        return (
            <View style={styles.contain}>

                <TouchableOpacity onPress={
                    () => {
                        let data = {name:'金三pang'};
                        const {navigate} = this.props.navigation;
                        navigate("NewPush",data);
                    }
                } >
                    <View style={{width: 100,height: 50,backgroundColor:"#0ff000aa"}} ></View>
                </TouchableOpacity>
                <TouchableOpacity onPress={
                    () => {
                        this.setTitle('標題修改了');
                    }
                } >
                    <View style={{width: 100,height: 50,backgroundColor:"#0f00f0aa"}} ><Text style={{color:'#FFFFFF',padding:20}}>改標題</Text></View>
                </TouchableOpacity>
            </View>
        );
    }

    componentDidMount(): void {
        this.setTitle('動態標題33');

        this.props.navigation.setParams({navigatePress:this.clickBarButton})
    }

    setTitle(str){
        const { setParams } = this.props.navigation;
        setParams({ title: str });
    }

    clickBarButton(){
        alert('bar button');
    }

    static navigationOptions = ({navigation,screenProps}) =>  {
        const { params } = navigation.state;

        return ({
            headerTitle:params?params.title:"wz",
            headerLeft:<TouchableOpacity onPress={()=>{
                console.log(navigation);
                let data = {name:'編輯動態標題'};
                navigation.push("NewPush",data);
            }} ><Text>確定</Text></TouchableOpacity>,

            headerRight:<TouchableOpacity onPress={()=>{
                // navigation.state.params.navigatePress()
                params?params.navigatePress():{};
            //
            }} ><Text>方法</Text></TouchableOpacity>,
        })
    }
}
const styles = StyleSheet.create({
    contain:{
        backgroundColor:'#ff000022',
        flex:1,
    },
});
const FirstNavi = createStackNavigator({
    First: {
        screen: FirstView,
        navigationOptions: {
            title: '第一頁',
            headerStyle: {
                backgroundColor: HbColor.COLOR_e85b53,
            },
            headerTintColor: '#ffffff',
            // headerRight:
        },
    },
    NewPush:{
        screen: NewPushView,
        navigationOptions: {
            title: '新頁面',
            headerStyle: {
                backgroundColor: HbColor.COLOR_3D8BAA,
            },
            headerTintColor: '#ffffff',
            // headerRight:
        },
    }
}, {
    navigationOptions: ({
                            navigation
                        }) => ({
        //如果第二個頁面還需要底部的四個按鈕，那麼把下面段代碼註釋掉
        tabBarVisible: navigation.state.index > 0 ? false : true,
    })
});

export default FirstNavi;

項目下載地址：https://github.com/hebiao6446/DemoProject
陸續更新中。。。

會到不會是個過程，我們程序猿👩‍💻都在經歷着這個過程，我能做到的是儘量詳細的毫無保留的截圖和解釋，程序猿何必要爲難程序猿了？

react native 開發APP（五）頁面跳轉，帶參數跳轉，導航條，導航條按鈕

react native 頁面跳轉

官網 https://reactnative.cn/

1.react native 從A頁面跳轉到B頁面

2.react native 從A頁面跳轉到B頁面，帶參數

3.react native 導航欄的配置

4.react native 導航欄的上面的按鈕設置

5.react native 導航欄標題修改

史上最詳細https配置

react native 開發APP（四）頁面導航, Tabbar, Navigation

KVC ，NSKeyValueCoding 淺談

spring，struts，hibernate，mybatis 源碼下載

react native 開發APP（五）頁面跳轉，帶參數跳轉，導航條，導航條按鈕

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結