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

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

基礎原件

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',
},
});

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store