React-native-alert
提供:Dev Guides
React Native-アラート
この章では、カスタム*アラート*コンポーネントの作成方法を理解します。
ステップ1:App.js
import React from 'react'
import AlertExample from './alert_example.js'
const App = () => {
return (
<AlertExample/>
)
}
export default App
ステップ2:alert_example.js
*showAlert* 関数をトリガーするためのボタンを作成します。
import React from 'react'
import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'
const AlertExample = () => {
const showAlert = () =>{
Alert.alert(
'You need to...'
)
}
return (
<TouchableOpacity onPress = {showAlert} style = {styles.button}>
<Text>Alert</Text>
</TouchableOpacity>
)
}
export default AlertExample
const styles = StyleSheet.create ({
button: {
backgroundColor: '#4ba37b',
width: 100,
borderRadius: 50,
alignItems: 'center',
marginTop: 100
}
})
出力
あなたがボタンをクリックすると、次が表示されます-