React-Native 導航-3

上一節講到name="Home"可以指定頁面的標題。現在還有一種方式：

screenOptions好像是可以統一樣式

先看下一個Context

我們用props傳遞數據，只能一層一層傳輸，用Context可以替換這種方法，有點全局變量的意思

import * as React from 'react';
import { Button, View,Text} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
 

export default class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  return (
    <View>
      <ThemedButton theme={props.theme} />
    </View>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button title={this.props.theme} />;
  }
}

theme屬性，傳遞給Toolbar，又傳遞給Button的title,如下

使用Context改寫上面的例子

import * as React from 'react';
import { Button, View,Text} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
 
const ThemeContext = React.createContext();

export default class App extends React.Component {
  render() {
    return <ThemeContext.Provider value="light"><Toolbar/></ThemeContext.Provider>;
  }
}

function Toolbar(props) {
  return (
    <View>
      <ThemedButton />
    </View>
  );
}

class ThemedButton extends React.Component {
  static contextType=ThemeContext;
  render() {
    return <Button title={this.context} />;
  }
}

我們所做的是：

1.聲明一個全局的上下文變量const ThemeContext = React.createContext();

2.在變量的入口，也就是App組件，用ThemeContext.Provider包裹組件，value的值就是需要傳入的參數的值

3.利用this.context獲取最近的由context設置的屬性

我們將組件Toolbar中的ThemedButton也用ThemeContext.Provider包裹，看看最後按鈕的值是什麼

結果是more light

Toolbar中顯示這個this.context，結果會怎麼樣

import * as React from 'react';
import { Button, View,Text} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
 
const ThemeContext = React.createContext();

export default class App extends React.Component {
  render() {
    return <ThemeContext.Provider value="light"><Toolbar/></ThemeContext.Provider>;
  }
}

class Toolbar extends React.Component{
  static contextType=ThemeContext;
  render(){
  return (
    <View>
    <ThemeContext.Provider value="more light">
      <Text>{this.context}</Text>
      <ThemedButton />
      </ThemeContext.Provider>
    </View>
  );}
}

class ThemedButton extends React.Component {
  static contextType=ThemeContext;
  render() {
    return <Button title={this.context} />;
  }
}

這裏有一個東西 static contextType=ThemeContext;

contextType是一個靜態屬性，也就是類的屬性，我這篇文章JavaScript-靜態屬性和靜態方法講過用法

（這時我自己寫的，說實話，這幾天不用又忘了，跟沒學一樣）

那麼我們將上面的context，修改爲組件組合試試

import * as React from 'react';
import { Button, View,Text} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
export default class App extends React.Component {
  render() {
  return (
    <Toolbar>
      <ThemedButton title="light"/>
    </Toolbar>
);}}

function Toolbar(props) {
  return (
    <View>
      {props.children}
    </View>
  );
}

function ThemedButton(props) {
    return <Button title={props.title} />
}

看過來就是 App組件跳過了Toolbar，將參數直接傳遞給了ThemedButton

接下來往下看

 把組件作爲屬性傳入，仿造着改寫一下，（雖然不知道是不是這個意思）

import * as React from 'react';
import { Button, View,Text} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
export default class App extends React.Component {
  render() {
  const themedButton=<ThemedButton title='light'/>;
  return (
    <Toolbar themedButton={themedButton}>
    </Toolbar>
);}}

function Toolbar(props) {
  return (
    <View>
      {props.themedButton}
    </View>
  );
}

function ThemedButton(props) {
    return <Button title={props.title} />
}

可能層數不夠，體現不出來組合組件的優勢

接下來看看動態Context/

 

後面的不想看了，前端工作太難找了，我要去學後端去了

下面是contenxt 和react native navigation的學習鏈接：

https://zh-hans.reactjs.org/docs/context.html

https://reactnavigation.org/docs/hello-react-navigation#passing-additional-props