React Native 跨平台APP開發學習筆記(三)：常用的Component

Yanwei Liu

·

Follow

9 min read

·

Jun 3, 2019

--

Share

flex是Component在螢幕中所占的比例，數字越大，比例越大View:無法上下滑動
ScrollView:最普遍，一次渲染全部內容，能上下滑動
FlatList:性能最好，只渲染滑動到的內容
SectionList:在一個Section裡面的List中有很多列內容(分組列表)View, Button, Image, Navigator, ListView(目前被棄用), TextInput，差不多可以完成80%的工作了

ReactNative佈局樣式總結

React Native知识1-FlexBox 布局内容

react-native-styling-cheat-sheet

基礎原件

View

import { View } from 'react-native';
<View style={{ flex: 1 }}>
 <View style={{backgroundColor: 'cadetblue', flex: 1}} />
 <View style={{backgroundColor: 'blue', flex: 1}} />
</View>

Text

import { Text } from 'react-native';
<Text style={{ color: '#fff', fontSize: 30 }}> Hellow!! </Text>

APP佈局

水平垂直置中

.container {
  justify-content: center;
  align-items: center;
}

文字

import { Text } from 'react-native';export default class TextDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          臣亮言：先帝創業未半，而中道崩殂。
          今天下三分，益州疲弊，此誠危急存亡之秋也。
        </Text>
        
      </View>
    );
  }
}const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#EDE7C9',
    padding: 20,
  },
  paragraph: {
    flex: 1,
    backgroundColor: '#D25141',
    color: '#F9CF7A',
    fontSize: 24,
    lineHeight: 32,
    padding: 20,
  },
});

圖片

用 require 去載入圖檔
<Image source={require('./my-icon.png')} />網路上的圖片
// 網路上的圖片，必須在 Image 上先指定好長寬
<Image 
  source={{
    uri: 'https://facebook.github.io/react/img/logo_og.png',
  }}
  style={{ width: 400, height: 400 }} 
/>

TouchableOpacity按鈕(透明效果)

import { TouchableOpacity } from 'react-native';<TouchableOpacity
  onPress={() => {}}
>
  <View style={styles.btn}>
    <Text style={styles.text}>按鈕</Text>
  </View>
</TouchableOpacity>

ScrollView(最普遍，預設能向下滑動，全部渲染)

<ScrollView>
  <Text style={{ fontSize: 60 }}>帶給各位滿滿的大平台！</Text>
  <Text style={{ fontSize: 60, color: 'red' }}>帶給各位滿滿的大平台！</Text>
  <Text style={{ fontSize: 60, color: 'blue' }}>帶給各位滿滿的大平台！</Text>
  <Text style={{ fontSize: 60 }}>帶給各位滿滿的大平台！</Text>
  <Text style={{ fontSize: 60, color: 'red' }}>帶給各位滿滿的大平台！</Text>
  <Text style={{ fontSize: 60, color: 'blue' }}>帶給各位滿滿的大平台！</Text>
</ScrollView>

ListView(內容超過1頁能顯示時，就能向下滑動)

import { ListView } from react-native;<ListView
  dataSource={dataSource}
  renderRow={(rowData) => <ButtonSample buttonText={rowData} />}
/>//dataSource是List 預計要顯示的全部資料
//renderRow 就是每個 ListItem 要長怎樣，可以想像成他是一個 for 迴圈遍歷整個  array 然後把值塞進去 dump Component 之中作為顯示。

鍵盤輸入

輸入框

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  Text
} from 'react-native';export default class KeyboardExample extends Component {
  state = {
    text: 'Welcome to React Native!',
  };
  
  handleInputChange = text => {
    this.setState({ text });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {this.state.text}
        </Text>
        <TextInput
          style={{
            height: 40,
            color: '#FFF',
            borderColor: 'gray',
            backgroundColor: '#000',
            borderWidth: 1,
            padding: 10,
            textAlign: 'center',
          }}
          onChangeText={this.handleInputChange}
          value={this.state.text}
        />
      </View>
    );
  }
}

關掉鍵盤

import { Keyboard } from 'react-native';// submit資料時關閉鍵盤
<TextInput
  onSubmitEditing={Keyboard.dismiss}
/>

APP換頁

Navigator

import { Navigator } from 'react-native'<Navigator
  style={{ flex: 1 }}
  initialRoute={{}}
  configureScene={(route, routeStack) => {}}
  renderScene={(route, navigator) => {}}
/>--------------------------------------------------------------------import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Navigator
} from 'react-native';
import ButtonSample from '../ButtonSample';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';


export default (props) => {
  let renderScene = (route, nav) => {
    let onBack = () => {
      nav.pop();
    }
    switch (route.id) {
      case 'simple1':
        return <Page1 onBack={onBack}/>;
      case 'simple2':
        return <Page2 onBack={onBack}/>;
      case 'simple3':
        return <Page3 onBack={onBack}/>;
      default:
        return (
          <View style={styles.center}>
            <ButtonSample buttonText={'Page 1'} onPress={() => nav.push({id: 'simple1', })} />
            <ButtonSample buttonText={'Page 2'} onPress={() => nav.push({id: 'simple2', })} />
            <ButtonSample buttonText={'Page 3'} onPress={() => nav.push({id: 'simple3', })} />
          </View>
        )
    }
  }

  let configureScene = (route, routeStack) => {
    switch (route.id) {
      case 'simple1':
        return Navigator.SceneConfigs.VerticalDownSwipeJump
      case 'simple2':
        return Navigator.SceneConfigs.PushFromRight;
      case 'simple3':
        return Navigator.SceneConfigs.FloatFromBottom;
      default:
        return Navigator.SceneConfigs.PushFromRight;
    }
  }

  return (
    <Navigator
      style={{ flex: 1 }}
      initialRoute={{}}
      configureScene={configureScene}
      renderScene={renderScene}
    />
  )
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});