[解決済み] react nativeでトーストメッセージを表示する方法
2022-03-09 06:52:14
質問
react nativeでボタンクリック時にトーストメッセージを表示させようとしています。
import React,{ Component } from 'react';
import { StyleSheet,TextInput, View, Button, Text, ToastAndroid } from 'react-native';
export default class App extends Component {
state = {
placeName : "",
titleText: "Text view"
}
placeNameChangeHandler = val =>{
this.setState({
placeName : val
})
}
placeSubmitHandler = () =>{
this.setState({
titleText: this.state.placeName.trim()
})
}
render() {
return (
<View style={styles.rootContainer}>
<View style={styles.btnEditContainer}>
<View style ={styles.wrapStyle}>
<TextInput
style = {styles.textInputStyle}
value = {this.state.placeName}
onChangeText = {this.placeNameChangeHandler}
/>
</View>
<View style ={styles.wrapStyle}>
<Button
title="Add"
style ={styles.buttonStyle}
onPress ={this.placeSubmitHandler}/>
</View>
</View>
<View style={styles.textContainer}>
<View style ={styles.wrapStyle}>
<Text
style ={styles.textStyle}>
{this.state.titleText}
</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
rootContainer: {
height:"100%",
width:"100%",
backgroundColor: "#008000",
flexDirection:"column",
alignItems:"center",
justifyContent: "center"
},
btnEditContainer: {
backgroundColor:"#008080",
flexDirection:"row",
alignItems:"center",
justifyContent: "center"
},
textContainer: {
backgroundColor:"#00FFFF",
flexDirection:"column",
alignItems:"center",
justifyContent: "center"
},
textStyle: {
fontSize: 20,
flexDirection:"column",
alignItems:"center",
justifyContent: "center"
},
buttonStyle: {
},
textInputStyle: {
borderColor:"black",
borderWidth:1,
},
wrapStyle: { marginLeft:5,
marginRight:5 },
});
解決方法は?
以下のように使用できます。
notifyMessage
をクリックすると、トーストメッセージが表示されます。
import {
ToastAndroid,
Platform,
AlertIOS,
} from 'react-native';
function notifyMessage(msg: string) {
if (Platform.OS === 'android') {
ToastAndroid.show(msg, ToastAndroid.SHORT)
} else {
AlertIOS.alert(msg);
}
}
または
使用方法
react-native-simple-toast
をiOS &Androidの両方で使用することができます。
import Toast from 'react-native-simple-toast';
Toast.show('This is a toast.');
Toast.show('This is a long toast.', Toast.LONG);
関連
-
[解決済み】React native ERROR Packager can't listen on port 8081
-
[解決済み] React Nativeです。View onPress が動作しない
-
[解決済み] React-Nativeでこのトランスフォームを作るには?
-
[解決済み] ScrollView 内の FlatList がスクロールしない
-
[解決済み] react nativeでトーストメッセージを表示する方法
-
[解決済み] React-NativeアプリでAxios GETとAuthorizationヘッダを使用する
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] react-nativeでキーボードを隠す
-
[解決済み】テキストに省略記号を表示させる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Native。未処理のプロミスリジェクトの可能性
-
[解決済み】React/RCTBridgeDelegate.h' ファイルが見つかりません。
-
[解決済み] モジュールAppRegistryが呼び出し可能なモジュールとして登録されていない(runApplicationを呼び出す)。
-
[解決済み] rn-fetch-blob: アップロードされた画像をテストする方法
-
[解決済み] エラーが発生しました。react-native-elementsインストール後、Unrecognized font family Material Design icons?
-
[解決済み] React Nativeでテキストを太字、斜体、下線にするにはどうすればよいですか?
-
[解決済み] Expoを使用してReact Nativeをクリーンアップ(キャッシュのリセット)するにはどうすればよいですか?キャッシュの問題かどうかはわかりません
-
[解決済み] ScrollView 内の FlatList がスクロールしない
-
envに対する解決策:node: そのようなファイルやディレクトリはありません
-
[解決済み】テキストに省略記号を表示させる方法