react-native 入门基础-注意细节总结

2019-01-16 本文已影响0人 Lucky_ce60

State状态
1 .一切界面变化都是状态state变化；
2 .每次调用setState时，组件就会重新执行render方法重新渲染；
3 .state的修改必须通过setState()方法；
①this.state.likes = 100; //这样的直接赋值修改无效；
②setState是一个merge合并操作，只修改指定属性，不影响其他属性；
③setState是异步操作，修改后不会立即生效；
样式
1 .style属性可以传一个数组，在数组中位置居后的样式对象比居前的优先级更高，这样可以间接实现样式的继承。
弹性（flex）布局
1 .在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

flexbox布局

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

1.flexDirection决定布局的主轴：（row,column,row-reverse,column-reverse）[默认竖轴方向：column]
2.justifyContent决定其子元素沿着主轴的排列方式:（flex-start、center、flex-end、space-around、space-between以及space-evenly）
3.alignItems决定其子元素沿着次轴(与主轴垂直的轴)的排序方式：（flex-start、center、flex-end以及stretch）

Touchable 系列组件
1 .button组件的样式是固定的，如果它的外观并不怎么搭配你的设计，那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮。
2 .可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
3 .还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
4 .还可以使用TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
5.还可以使用TouchableWithoutFeedback，处理点击事件的同时不显示任何视觉反馈。
6 .某些场景中你可能需要检测用户是否进行了长按操作,可以在上面列出的任意组件中使用onLongPress={}属性来实现。
滚动视图
1 .ScrollView是一个通用的可滚动的容器，可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal[当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。]属性来设置）。
2 . 如果需要显示较长的滚动列表数据，推荐性能更好的FlatList组件或者SectionList组件，
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

  <FlatList
          data={[ //数据源
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>} //解析数据，
         // 为什么这里写成了'{item}',而并不是'(item)',根据es6的解构方法，模式匹配。
        />

如果需要渲染的是一组需要分组的数据，且带有分组标签的，推荐使用SectionList组件。

 <SectionList
          sections={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />

网络
1 . 发起请求(fetch为获取的意思)

fetch("https://mywebsite.com/mydata.json");//还有可选的第二个参数，用来定制htttp请求一些参数，比如：

 method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    firstParam: "yourValue",
    secondParam: "yourOtherValue"
  })

2 .处理服务器响应的数据
网络请求是一种异步操作

async function getMoviesFromApi() {
  try {
    // 注意这里的await语句，其所在的函数必须有async关键字声明
    let response = await fetch(
      "https://facebook.github.io/react-native/movies.json"
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error); //别忘了 catch 住fetch可能抛出的异常，否则出错时你可能看不到任何提示。
  }
}

以上内容，有任何描述错误，可在评论中提出！谢谢！

react-native 入门基础-注意细节总结

猜你喜欢

热点阅读