- Main: React, Vue , React-Native, Android.
- Second: Flutter, Node.
- Learn new knowledge and share new knowledge.
mochixuan / react-native-smart-tip Goto Github PK
View Code? Open in Web Editor NEW🔥🔥🔥Toast , SnackBar , Modal , Show Toast above Modal
🔥🔥🔥Toast , SnackBar , Modal , Show Toast above Modal
When I use suceess or fail to kill the loading, i just wanna replace the icon, not the whole toast, how can i do that?
import { RootSiblingParent } from 'react-native-root-siblings';
如上,项目里面也需要自定义一个全局弹出框,有用到RootSiblingParent,如果使用的话react-native-smart-tip就不能用。
"react": "16.13.1",
"react-native": "0.63.2",
有谁知道怎么解决吗?
ios rn 0.63 Modal icon 不显示 切阻止JS继续执行
这个解决方法和我在 native-base 的 issue 里看到的类似,链接如下:
GeekyAnts/NativeBase#985
但是有些应用场景貌似不太适用,比如一个 Page 包含一个 Modal,需要满足既能够在页面显示 Toast 又能在 Modal 显示时 Toast 能显示在 Modal 上方。
麻烦您看一下(^▽^)
我尝试了root-toast和WToast,均无法显示.
在显示和消失的回调中是可以看到log的
不知道是哪里处理问题,初学者=-=
Toast会被弹出的输入法遮住,而Snackbar是正常的会被弹出的输入法顶起。
我下载了demo运行,也新建了项目把这个组件添加进来,为什么点击没反应
请问可以开放一个接口 改变WToast.show()中提示文字大小嘛?
Is there any global way to style the toast without me adding the styles to each invocation of WToast.show
or refactoring the function out into another one?
大神,可以根据点击的控件确定弹出的位置吗?或者提供参数输入位置
Since react-native 0.65.x
handling listeners has changed, here's a patch-package
file to temp fix only ToastView.js
:
diff --git a/node_modules/react-native-smart-tip/toast/ToastView.js b/node_modules/react-native-smart-tip/toast/ToastView.js
index 348e3a4..27f36e7 100644
--- a/node_modules/react-native-smart-tip/toast/ToastView.js
+++ b/node_modules/react-native-smart-tip/toast/ToastView.js
@@ -25,7 +25,7 @@ export default class ToastView extends Component{
}
// React after 17
- Dimensions.addEventListener('change', this.onWindowChange);
+ this.dimensionsSubscription = Dimensions.addEventListener('change', this.onWindowChange);
}
componentDidMount() {
@@ -37,7 +37,7 @@ export default class ToastView extends Component{
this.liftCycleAnimated.stop()
this.liftCycleAnimated = undefined
}
- Dimensions.removeEventListener('change', this.onWindowChange);
+ this.dimensionsSubscription?.remove();
}
render() {
@mochixuan for backwards compatibility you could add:
import React from 'react';
const ReactNativeVersion = require('react-native/Libraries/Core/ReactNativeVersion');
constructor(props) {
super(props);
const { width, height } = Dimensions.get("window");
this.state = {
deviceWidth: width,
deviceHeight: height,
animatedValue1: new Animated.Value(0),
animatedValue2: new Animated.Value(0.2)
};
// React after 17
if (v >= 65) {
this.dimensionsSubscription = Dimensions.addEventListener(
"change",
this.onWindowChange
);
} else {
Dimensions.addEventListener("change", this.onWindowChange);
}
}
componentWillUnmount() {
if (this.liftCycleAnimated) {
this.liftCycleAnimated.stop();
this.liftCycleAnimated = undefined;
}
const v = parseInt(
ReactNativeVersion.version.major + ReactNativeVersion.version.minor,
10
);
if (v >= 65) {
this.dimensionsSubscription?.remove();
} else {
Dimensions.removeEventListener("change", this.onWindowChange);
}
}
not tested ^^, just a suggestion, this should apply to all Views, not only ToastView
😄
当使用Modal组件的时候,WToast会被挡在下面。
I would like to leave it as a suggestion: An option to slide to close in SnackBar mode, or to click on the component and close.
The suggestion was to close it, invoking the .hide()
method, but it could be a customizable action property as well.
Yes, I know you have a similar option, but it is using text. The ideal would be one executed from the interaction of any area of the component. Using only WSnackBar.show()
.
像是snack bar , 用来做弹出浮层
// 这是具体弹框的代码
WModal.show({
data: '请选择规格',
position: WModal.position.CENTER,
textColor: '#fff',
backgroundColor: '#444444',
});
setTimeout(() => {
WModal.hide();
}, 1500);
发现在显示toast或者modal时,没有遮罩层,容易误触,能否加一个
how to set no Admission animation?
const load1 = WModal.show({
data: '加载中',
textColor: '#fff',
backgroundColor: '#444444',
position: WModal.position.CENTER,
icon: <ActivityIndicator color="#fff" size={'large'} />,
});
console.log(load1);// undefined 这里是 undefined
show 了以后不知道怎么关闭.
"dependencies": {
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-smart-tip": "^2.3.0"
}
猜测0.64做了很多改动。建议全部升到最新版
ios 和 android 均可复现:
demo 链接:
链接: https://pan.baidu.com/s/1VT9Dv0AVfDo86VxplYIWAw 密码: 6ogc
demo 使用:
yarn install
cd ios
pod install --verbose --no-repo-update
yarn ios
Thanks for this great tool.
How to make the text center aligned and change font family in snakbar?
"react": "16.9.0",
"react-native": "0.61.0",
WToast.show({
data: msg,
textColor: '#ffffff',
backgroundColor: '#000000',
duration: 2, // 1.SHORT 2.LONG
position: WToast.position.CENTER, // 1.TOP 2.CENTER 3.BOTTOM
});
inEasing not working in android (debug) not tested in APK
data: "", textColor: "#ffffff", backgroundColor: error ? "#ff490b" : CONST.APP_COLOR, duration: WToast.duration.LONG, position: WToast.position.BOTTOM, isShowShadow: false, inEasing: Easing.ease,
Is it possible to use WModalShowToastView in functional components? If so, how to do this and preferably with an example.
Animated: useNativeDriver
was not specified. This is a required option and must be explicitly set to true
or false
in SnackView (at SnackBar.js:25)
最新的0.62版本。
RT,react-native-root-siblings已经升级到4.0.6,升级下依赖来解决模块无法显示的问题
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.