reactnative笔记

光阴呢喃

已于 2025-02-26 22:45:35 修改

阅读量518

点赞数

分类专栏： react native 文章标签： react native

于 2023-03-08 16:24:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44114524/article/details/129405881

版权

这篇博客详细记录了React Native开发中的多个实用技巧和遇到的问题，包括类型判断、字符串条件拼接、设置背景透明、键盘管理、NativeMethods的使用、Linking.openURL的应用、Xcode更新后的错误修复、颜色代码结构、双ScrollView滚动冲突处理、页面参数管理等，旨在帮助开发者解决实际开发中的常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，类型判断：https://www.cnblogs.com/honeynm/p/10046376.html


type Props = {
  foo: number,
  bar?: string,
};
class MyComponent extends React.Component < Props >{
  static defaultProps = {
    foo: 42, // ...but we have a default prop for foo.
  };
  render() {
    this.props.doesNotExist; // Error! You did not define a `doesNotExist` prop.
    return <div>{this.props.bar}<div>;
    }
  }
  <MyComponent foo={42} />;

2，字符串条件拼接

`ios-information-circle${focused ? ' ' : '-outline'}`

focused：在字符串后拼接' ' ，否则拼接'-outline'

3，设置背景色透明

backgroundColor:'rgba(0,0,0,.2)',

4，点击空白隐藏键盘

1，Scrollview 使用属性：keyboardShouldPersistTaps="handled"

2，使用系统组件包裹：《TouchableWithoutFeedback onPress={Keyboard.dismiss}>

5，NativeMethods类方法

1，ref修改组件样式：


this.refs.text2.setNativeProps({
    style:{
        color:'blue',
        fontSize:30
    }
});

2，测量组件位置和宽高：

componentDidMount(){
    //需要在组件加载完成后，延迟测量获取
    setTimeout(()=>{
        this.progressBar.measure((x, y, width, height, pageX, pageY) =>
            this.setState({progressLocation: {x:x,y:y,width:width,height:height,pageX:pageX,pageY:pageY}})
        );
    },1);
}

3，函数式写法获取ref尺寸

  const ref1 = useRef(null)
  useEffect(()=>{
    console.log('ref1: '+ ref1);
    setTimeout(()=>{
      //从current中的$ref中取current
      ref1.current.$ref.current.measure((x, y, width, height, pageX, pageY)=>{
        console.log(x, y, width, height, pageX, pageY);
      })
    },10);
  },[ref1]);

  <View ref={ref1} />

4，View可以用onLayout方法监听

constructor() {
        super()

        //导航栏左右侧容器和布局
        this._leftRef;
        this._leftLayout;
    }


//在组件中监听onLayout方法，实时获取view布局
<View style={TitleStyle.left} ref={o=>this._leftRef=o} onLayout={(e)=>{
                // console.log(e.nativeEvent.layout);
                this._leftLayout = e.nativeEvent.layout;
                this._didCheckLRWidth();
            }}>