React-Native 笔记

最新推荐文章于 2024-10-22 22:13:26 发布

林胖子的私生活

最新推荐文章于 2024-10-22 22:13:26 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： RN

本文链接：https://blog.youkuaiyun.com/qq_22329521/article/details/60143983

RN 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨React Native中Props和State的概念与用法，包括Props作为组件间数据传递的作用及State在组件状态管理中的应用，并附带实例解析。

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

简书地址：http://www.jianshu.com/p/efe8f29adecd

Props属性和State属性

Props官方解释：大多数组件在创建的时候可以使用各种参数来进行定制，用于定制的的这些参数就是Prop
Props也可用来做界面传递的数据

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

在下面的这段代码中 this.props是没有的但是却在LotsOfGreetings 传递进去，作为一个属性

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

通过Navigator来进行跳转

 render() {
        return (
            <Navigator
                initialRoute={{name: 'My First Scene', index: 0}}
                renderScene={(route, navigator) =>
      <MyScene
        name={route.name}
        onForward={() => {
          var nextIndex = route.index + 1;
          navigator.push({
            name: 'Scene ' + nextIndex,
            index: nextIndex,
          });
        }}
        onBack={() => {
          if (route.index > 0) {
            navigator.pop();
          }
        }}
      />
    }
            />
        );

render(){
        return(
        <Text>{this.props.name}</Text>
        );
    }

在二级界面也需要跳转 ,可以通过当前的props来获取

const {navigator} = this.props;

Props的特点有一个特点是单向传递，父类有的属性可以传递给子类

State状态

一般是数据或者状态存在里面

 render() {
          if (!this.state.loaded){
              return this.renderLoadingView();
          }
          return  <ListView
              dataSource={this.state.dataSource}
              renderRow={this.rederMovie}
              style={styles.listView}
          />;
    }
    //在界面渲染的时候 根据状态中的某个值来处理，当前的业务场景是如果未加载显示加载中的图，加载完成显示加载成功后的图

    //在初始化中设置他的状态是false
 constructor(props){
        super(props);
        this.state={
            loaded:false,
        };
        this.fetchData=this.fetchData.bind(this);
    }
  //这是Rn生命周期的一个回调在render方法后，组件加载成功后执行
  componentDidMount(){
        //网络请求
        this.fetchData();
    }

 //网络请求成功，修改loaded状态
 fetchData(){
        fetch(REQUEST_URL)
            .then((response)=>response.json())
            .then((responseData)=>{
            this.setState({
                loaded:true,
            });
            });

Rn中State状态的修改会修改视图，和Android不同不需要handler等操作通知视图修改，但是并不会重新渲染所以视图，会修改新的state和之前的state存在差异的视图

Rn给人的感觉

还是和前端类似的，StyleSheet.create给人CSS的感觉，render 中返回的<\View>和div类似，在flex等都和前端系统，通过js来决定他的行为

Rn热更新的方式（个人理解）

在init的Android项目的MainApplication中，存在一个ReactNativeHost 的createReactInstanceManager方法， getJSBundle 拿到要给文件路径然后之后就是他内部的实现，可能是debug版的缘故在debug包下没有assets的目录，所以可能是需要在设备dev setting中设置本地的一个ip路径来获取load 一个文件，在release包下存在一个assets的目录，如果热更新可以动态修改这个目录下的文件或者是，在MainApplication编写 getJSBundle等修改获取文件的路径的方式，在这里面大多数的资源代码都是编写在js目录文件下，所以在和传统dex更新不同，也没有资源很难更新的痛点

几个坑

在项目init之后，用webStorm打开项目，从外部看结构是正常的，在启动react-native run-android 之后出现下面的问题

可能的原因是（当前环境的Windows,可能Android环境变量没配置好，在打开Android目录发现少了基本配置文件，解决方法是用AS打开react-natvie下的目录下的Android项目，让studio 配置好项目文件，在重新运行rn项目，就成功了

- 在界面传递的过程中，<font color='red'>主要传递的参数名字，可能因为这个不同，造成莫名其妙的问题</font>