react-native navigationOptions中不能获取this、state

场景：在createStackNavigator路由过来的页面，navigationOptions的header中添加搜索框

  • 如下图：如下图

    static navigationOptions = {
      headerStyle: {backgroundColor: '#0086f1'},
      headerTitle: (
          <TextInput placeholder={'请输入搜索内容'}
                     onChangeText={(text) => this.setState({'str': text})
    };
    constructor(props) {
        super(props)；
        this.state = ({
            str: ''
        })
    };

  • 使用this.setState的时候出现如下错误: 错误

    因为this对象为null，所以找不到setState方法

解决办法：外部引用

  • 在最外部申明：

    let that;

  • 在class内部赋值

    constructor(props){
      super(props);
      that = this;
    }

  • 完整代码:

    let that;//外部申明
    export default class MinePage extends Component<Props> {

        static navigationOptions = {
          ......
        };

        constructor(props) {
            super(props);
            that=this;
            this.state = ({
                str: ''
            })
        };
        
        render() {
            return (
                <View style={styles.container}>
                    //使用外部申明变量
                    <Text>{that.state.str}</Text>
                </View>
            );
        }
    }

    参考：https://www.cnblogs.com/yuxingxingstar/p/9804170.html
    https://blog.csdn.net/qq_35324309/article/details/88848315

textInput在android中，如果字体大小太小，垂直方向无法居中

解决办法：在textInput中的设置padding: 0

react-native 在ios中，图片不显示的问题

解决办法：

  • 在node_modules/react-native/Libraries/RCTUIImageViewAnimated.m中273行修改以下代码：

    # 修改前：
    - (void)displayLayer:(CALayer *)layer
    {
      if (_currentFrame) {
        layer.contentsScale = self.animatedImageScale;
        layer.contents = (__bridge id)_currentFrame.CGImage;
      }
    }

    # 修改后：
    - (void)displayLayer:(CALayer *)layer
    {
      if (_currentFrame) {
        layer.contentsScale = self.animatedImageScale;
        layer.contents = (__bridge id)_currentFrame.CGImage;
      } else {
        [super displayLayer:layer];
      }
    }

  • 详细解决方案