Basic React Native Part 27 - React Native AppState
Pada Part 26 kita telah belajar dan mengenal Section List jadi jika anda belum mengikuti tutorial Part 26 diharapkan anda mengikuti tutorial Part 26 terlebih dahulu. Pada Tutorial Part 27 ini kita mengenal terlebih dahulu Basic React Native `AppState.
AppState dapat memberitahu Anda jika aplikasi ini di latar depan atau latar belakang, dan memberitahu Anda ketika perubahan State.
AppState
- aplikasi berjalan di latar belakang latar depan
- aplikasi berjalan di latar belakang. pengguna adalah baik: di aplikasi lain pada layar awal [android] pada aktivitas lain (bahkan jika itu diluncurkan oleh aplikasi Anda) [ios] tidak aktif
- ini adalah negara yang terjadi ketika transisi antara foreground & background, dan selama periode tidak aktif seperti memasukkan pandangan multitasking atau dalam hal panggilan masuk.
Mengimplementasikan Pada Project React Native
Buat Project React Native
Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.
react-native init namafolderprojectInstall Aplikasi Debug Ke Handphone Android
Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.
react-native run-androidBuka File App.js Dengan Visual Studio Code
Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;
Menghapus Code Default App.js
Untuk memudahkan memahami component AppState kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.
- Import React
import React, { Component } from 'react'
- Import Component React Native Untuk Project React Native dari React Native
import { AppState, Text } from 'react-native';
- Membuat Class Componet
class App extends Component {
render() {
return ( );
}
}
- Kemudian tambahkan code berikut ini diatas
render
//Tambahkan code ini diatas render
state = {
appState: AppState.currentState,
};
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = nextAppState => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App State: ' + 'App has come to the foreground!');
alert('App State: ' + 'App has come to the foreground!');
}
console.log('App State: ' + nextAppState);
alert('App State: ' + nextAppState);
this.setState({ appState: nextAppState });
};- Kemudian tambahan code berikut ini didalam
return.
return (
//Code return
<Text style={{flex:1, marginTop: 30, padding: 20, backgroundColor:'white'}}>
Current state is: {this.state.appState}
</Text>
)- Setelah itu export class App.
export default App- Berikut Code lengkap nya
import React, { Component } from 'react';
import { AppState, Text } from 'react-native';
class App extends Component {
state = {
appState: AppState.currentState,
};
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = nextAppState => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App State: ' + 'App has come to the foreground!');
alert('App State: ' + 'App has come to the foreground!');
}
console.log('App State: ' + nextAppState);
alert('App State: ' + nextAppState);
this.setState({ appState: nextAppState });
};
render() {
return (
<Text style={{flex:1, marginTop: 30, padding: 20, backgroundColor:'white'}}>
Current state is: {this.state.appState}
</Text>
);
}
}
export default App- Tampilan AppState
Demikianlah pembahasan Tutorial Part 27 ini akan kita lanjutkan pada Tutorial Part 28.