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