ReactNative基础组件学习（一）

一.照例第一个小程序 HellowWord.

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native'

const App = () => {
  return (
    <>
  <View style = {styles.view}>
   <Text>HelloWorld</Text>
  </View>
  </>
  );
};
const styles = StyleSheet.create({
  view: {
    backgroundColor:'green',
    width:100,
    height:50,
  }
});
export default App

二. Button组件 ，简单的按钮组件，这个组件不能设置背景图片，我一般用TouchableOpacity封装按钮

import { Button } from 'react-native';
...

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

title：按钮内显示的文本

color：文本的颜色(iOS)，或是按钮的背景色(Android)

disabled：设置为 true 时此按钮将不可点击。

三. FlatList 高性能的简单列表组件,高级组件实用性比较高

 <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
  />

renderItem({item, index, separators})，从data中挨个取出数据并渲染到列表中。

data：目前只支持普通数组

ItemSeparatorComponent：分割线

ListFooterComponent: 尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。

ListHeaderComponent:头部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。

getItemLayout:getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的，getItemLayout用起来就既高效又简单​​​​​​​