我正在尝试在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 },
});
5条答案
按热度按时间eqoofvh91#
可以使用下面的
notifyMessage
来显示吐司消息:或
在iOS和Android中使用
react-native-simple-toast
。vfwfrxfs2#
React Native现在有内置的API
Alert
,可以在iOS和Android上运行。https://reactnative.dev/docs/alertkkbh8khc3#
为这个定制的吐司创建一个单独的组件,并在其中使用以下代码:
并从所需的组件调用它;供您参考:
8dtrkrch4#
如果你正在寻找一个简单的,JS唯一的实现吐司通知的React Native,它可以在iOS和Android上工作,你可以看看
https://github.com/jeanverster/react-native-styled-toast
用途:
mfpqipee5#
您也可以使用包吐司消息。检查react-native-toast-message