-
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可能抛出的异常,否则出错时你可能看不到任何提示。
}
}
以上内容,有任何描述错误,可在评论中提出!谢谢!