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用起來就既高效又簡單​​​​​​​