「React Native入門 掌田 津耶乃著」にて動作確認したコードを逐一まとめた記事です。
基本は自分用のメモですので、動作確認したい場合ご利用ください。
ある程度は1記事を更新していき、セッションが切り替わったら別記事に残していこうと思います。
(注)「5-1 Androidの独自UIコンポーネント」は一旦省略します。
iOS開発が一通り終わった後、学習予定です。
目次
[ P.220〜P.224 ] PickeriOSコンポーネント
[ P.220〜P.227 ] DatePickeriOSコンポーネント
[ P.228〜P.233 ] TabBarIOSを利用する
TabBarIOSはv0.59で削除されたとのこと
[ P.233〜P.236 ] TabBarIOSを利用する
こちらは不明です。念の為下記にコードのみ残します。
[ P.236〜P.240 ] ActionSheetIOSコンポーネント
[ P.224〜P.224 ] PickeriOSコンポーネント
<PickerIOS
selectedValue=値
onValueChange=関数
>
...必要な分だけ追加<PickerIOS.Item />...
</PickerIOS>
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
export default class App extends Component {
constructor(props) {
super(props);
this.items = [
{ title: 'one', value: '最初' },
{ title: 'two', value: '2番目' },
{ title: 'three', value: '3番目' },
{ title: 'four', value: '4番目' },
{ title: 'five', value: '最後' },
];
this.state = {
title: 'iOS UI',
message: 'iOS UI Component.',
value: '最初',
};
}
render() {
return (
<View style={styles.base}>
<Header
leftComponent={{
icon: 'menu',
color: 'white',
size: 25,
onPress: this.doActionLeft
}}
centerComponent={{
text: 'Sample App',
style: styles.header
}}
rightComponent={{
icon: 'android',
color: 'white',
size: 25,
onPress: this.doActionRight
}}
otherContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
innerContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
/>
<View style={styles.body}>
<Text style={ styles.title }>
{ this.state.title }
</Text>
<Text style={ styles.message }>
{ this.state.message }
</Text>
</View>
<PickerIOS
selectedValue={ this.state.value }
style={ styles.picker }
onValueChange={
(value, index) => {
this.setState({ value:value });
Alert.alert('選択したのは' + value + 'です');
}
}
>
{
this.items.map((item, index) =>
<PickerIOS.Item
key={ index }
label={ item.title }
value={ item.value }
/>
)
}
</PickerIOS>
</View>
);
}
doActionLeft = () => { Alert.alert('Left icon tapped!'); }
doActionRight = () => { Alert.alert('Right icon tapped!'); }
}
const styles = StyleSheet.create ({
base: {
padding: 0,
flex: 1,
backgroundColor: '#fff',
},
body: {
padding: 10,
flex: 1,
backgroundColor: '#fff',
},
header: {
color: '#fff',
fontSize: 28,
fontWeight: '100',
},
page: {
paddingTop: 10,
paddingLeft: 10,
fontSize: 20,
},
title: {
color: '#1e90ff',
fontSize: 20,
},
message: {
padding: 0,
fontSize: 14,
},
picker: {
backgroundColor: '#fcfcfc',
}
});
[ P.220〜P.227 ] DatePickeriOSコンポーネント
<DatePickerIOS
locale='言語'
mode='date' // or time or datetime
date=値
onDateChange=関数
/>
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, DatePickerIOS, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
title: 'iOS UI',
message: 'iOS UI Component.',
value: new Date(),
};
}
render() {
return (
<View style={styles.base}>
<Header
leftComponent={{
icon: 'menu',
color: 'white',
size: 25,
onPress: this.doActionLeft
}}
centerComponent={{
text: 'Sample App',
style: styles.header
}}
rightComponent={{
icon: 'android',
color: 'white',
size: 25,
onPress: this.doActionRight
}}
otherContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
innerContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
/>
<View style={styles.body}>
<Text style={ styles.title }>
{ this.state.title }
</Text>
<Text style={ styles.message }>
{ this.state.message }
</Text>
</View>
<DatePickerIOS
locale='ja'
mode='date' // or time or datetime
date={ this.state.value }
style={ styles.picker }
onDateChange={
(value) => {
this.setState({ value: value });
Alert.alert('選択した日付は' + value.getFullYear() + '年' + (value.getMonth() + 1) + '月' + value.getDate() + '日です。');
}
}
/>
</View>
);
}
doActionLeft = () => { Alert.alert('Left icon tapped!'); }
doActionRight = () => { Alert.alert('Right icon tapped!'); }
}
const styles = StyleSheet.create ({
base: {
padding: 0,
flex: 1,
backgroundColor: '#fff',
},
body: {
padding: 10,
flex: 1,
backgroundColor: '#fff',
},
header: {
color: '#fff',
fontSize: 28,
fontWeight: '100',
},
page: {
paddingTop: 10,
paddingLeft: 10,
fontSize: 20,
},
title: {
color: '#1e90ff',
fontSize: 20,
},
message: {
padding: 0,
fontSize: 14,
},
picker: {
backgroundColor: '#fcfcfc',
}
});
原因不明 [ P.233〜P.236 ] TabBarIOSを利用する
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, DatePickerIOS, SegmentedControlIOS, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
export default class App extends Component {
constructor(props) {
super(props);
this.items = ['One', 'Two', 'Three'];
this.state = {
title: 'iOS UI',
message: 'iOS UI Component.',
value: 'One',
};
}
render() {
return (
<View style={styles.base}>
<Header
leftComponent={{
icon: 'menu',
color: 'white',
size: 25,
onPress: this.doActionLeft
}}
centerComponent={{
text: 'Sample App',
style: styles.header
}}
rightComponent={{
icon: 'android',
color: 'white',
size: 25,
onPress: this.doActionRight
}}
otherContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
innerContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
/>
<View style={styles.body}>
<Text style={ styles.title }>
{ this.state.title }
</Text>
<Text style={ styles.message }>
{ this.state.message }
</Text>
<SegmentedControlIOS
style={ styles.segCtl }
values={this.items}
selectedIndex={ this.state.value }
onChange={ (event) => { this.setSegment(event); } }
/>
</View>
</View>
);
}
setSegment = (event) => {
var index = event.nativeEvent.selectedSegmentIndex;
this.setState({ value: index });
Alert.alert('select id=' + index + ':' + this.items[index]);
}
doActionLeft = () => { Alert.alert('Left icon tapped!'); }
doActionRight = () => { Alert.alert('Right icon tapped!'); }
}
const styles = StyleSheet.create ({
base: {
padding: 0,
flex: 1,
backgroundColor: '#fff',
},
body: {
padding: 10,
flex: 1,
backgroundColor: '#fff',
},
header: {
color: '#fff',
fontSize: 28,
fontWeight: '100',
},
page: {
paddingTop: 10,
paddingLeft: 10,
fontSize: 20,
},
title: {
color: '#1e90ff',
fontSize: 20,
},
message: {
padding: 0,
fontSize: 14,
},
picker: {
backgroundColor: '#fcfcfc',
}
});
[ P.236〜P.240 ] ActionSheetIOSコンポーネント
<Text style={ styles.btn }
onPress={ this.名前 }>
CLICK
</Text>
...
名前 = () => {
ActionSheetIOS.showActionSheetWithOptions(オプション,関数);
}
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, DatePickerIOS, ActionSheetIOS,Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
export default class App extends Component {
constructor(props) {
super(props);
this.buttons = [
'One',
'Two',
'Three',
'Delete',
'Cancel',
];
this.state = {
title: 'iOS UI',
message: 'iOS UI Component.',
value: 'none',
};
}
render() {
return (
<View style={styles.base}>
<Header
leftComponent={{
icon: 'menu',
color: 'white',
size: 25,
onPress: this.doActionLeft
}}
centerComponent={{
text: 'Sample App',
style: styles.header
}}
rightComponent={{
icon: 'android',
color: 'white',
size: 25,
onPress: this.doActionRight
}}
otherContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
innerContainerStyles={{
height: 100,
backgroundColor: '#dd0000'
}}
/>
<View style={styles.body}>
<Text style={ styles.title }>
{ this.state.title }
</Text>
<Text style={ styles.message }>
clicked: { this.state.value }
</Text>
<Text style={ styles.btn }
onPress={ this.showActionSheet }>
CLICK
</Text>
</View>
</View>
);
}
showActionSheet = () => {
ActionSheetIOS.showActionSheetWithOptions({
options: this.buttons,
canselButtonIndex: 4,
destructiveButtonIndex: 3,
},
(index) => {
this.setState({ value: this.buttons[index] });
});
}
doActionLeft = () => { Alert.alert('Left icon tapped!'); }
doActionRight = () => { Alert.alert('Right icon tapped!'); }
}
const styles = StyleSheet.create ({
base: {
padding: 0,
flex: 1,
backgroundColor: '#fff',
},
body: {
padding: 10,
flex: 1,
backgroundColor: '#fff',
},
header: {
color: '#fff',
fontSize: 28,
fontWeight: '100',
},
page: {
paddingTop: 10,
paddingLeft: 10,
fontSize: 20,
},
title: {
color: '#1e90ff',
fontSize: 20,
},
message: {
padding: 0,
fontSize: 14,
},
btn: {
marginTop: 20,
padding: 15,
fontSize: 16,
textAlign: 'center',
color: '#fff',
backgroundColor: '#1e90ff',
}
});