React Native中navigationOptions内自定义组件样式失效问题咨询

嘿，我来帮你拆解这个问题～首先咱们先搞清楚为什么navigationOptions里的自定义组件会出现样式不生效还报错的情况，再看看你的实现是不是靠谱的。

为什么会出现样式不生效/报错？ #

navigationOptions和你屏幕组件内部的渲染逻辑不是一个上下文：

• 屏幕里的文本框是在组件的render()方法里渲染的，属于组件实例的上下文，能直接访问组件的this.state、this.props以及内部定义的样式对象，所以样式能正常生效。
• 但navigationOptions（不管是类组件的静态属性还是函数式的配置）是属于导航器的配置，它的执行上下文和组件实例是分离的。如果直接在里面引用组件内部的样式或者未正确绑定的实例方法，就会出现：
  1. 样式找不到（比如你用了this.style.searchInput，但这里的this不是组件实例）导致样式不生效；
  2. 方法的this指向错误，触发报错（比如你代码里的searchWorkouts如果没绑定this，调用时就会找不到setState）。

你的实现方式是否正确？ #

如果你的实现是通过this.props.navigation.setParams()把组件的实例方法、状态或者样式传递给navigationOptions，那这完全是正确且恰当的做法，这也是React Navigation官方推荐的处理方式——因为navigationOptions无法直接访问组件实例的属性，必须通过params来做桥接。

举个标准的正确实现示例，你可以对照看看：

import React, { Component } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

// 把样式抽成外部常量，确保navigationOptions能访问到
const styles = StyleSheet.create({
  searchInput: {
    width: 200,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10
  }
});

class WorkoutScreen extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { searchText: "" }; 
  } 

  // 用箭头函数定义方法，自动绑定组件实例的this
  searchWorkouts = (text) => {
    this.setState({ searchText: text });
    // 这里写你的搜索逻辑
  }

  componentDidMount() { 
    // 通过setParams把方法和状态传递给navigationOptions
    this.props.navigation.setParams({ 
      searchWorkouts: this.searchWorkouts,
      searchText: this.state.searchText
    }); 
  } 

  // navigationOptions写成接收navigation参数的函数，通过getParams获取传递的属性
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation;
    return {
      headerRight: () => (
        <TextInput
          style={styles.searchInput}
          onChangeText={params.searchWorkouts}
          value={params.searchText}
          placeholder="搜索训练"
        />
      )
    };
  }

  render() {
    return (
      <View>
        {/* 屏幕内的文本框，直接用样式没问题 */}
        <TextInput style={styles.searchInput} />
      </View>
    );
  }
}

额外注意点 #

1. 样式尽量定义在组件外部或者类的静态属性里，不要放在state或者组件内部的局部变量中，确保navigationOptions能访问到；
2. 如果你的自定义组件需要响应状态变化，记得在componentDidUpdate里更新params，比如当searchText变化时，重新调用setParams更新导航栏里组件的value；
3. 实例方法的绑定一定要处理好，要么在constructor里bind，要么用箭头函数定义方法，避免this指向错误。

内容的提问来源于stack exchange，提问作者Shashika Virajh