rilyu / teaset Goto Github PK
View Code? Open in Web Editor NEWA UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.
License: MIT License
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.
License: MIT License
code:
static show(options) {
let {duration, ...others} = options && typeof options === 'object' ? options : {};
let key = super.show(<this.ToastView {...others} />);
if (typeof duration !== 'number') {
console.log("Toast--duration");
switch (duration) {
case 'long': duration = 3500; break;
default: duration = 7000; break;
}
}
console.log("Toast--duration-time ", duration);
console.log("Toast--duration-time-dataStart", new Date());
setTimeout(() => {
console.log("Toast--duration-time-dataEnd", new Date());
this.hide(key)
}, 7000);
return key;
}
error:
Toast--duration
E:\lottery\RNLotteryProject\node_modules\teaset\components\Toast\Toast.js:40 Toast--duration-time 7000
E:\lottery\RNLotteryProject\node_modules\teaset\components\Toast\Toast.js:41 Toast--duration-time-dataStart Sat Jul 08 2017 10:02:37 GMT+0800 (**标准时间)
E:\lottery\RNLotteryProject\APP\Buy\BuyMainPage.js:53 paresData
E:\lottery\RNLotteryProject\APP\Buy\BuyMainPage.js:336 redner
E:\lottery\RNLotteryProject\APP\Buy\BuyMainPage.js:141 createNowLotteryNumberView 00 04 02 33 11 55 11
E:\lottery\RNLotteryProject\APP\Buy\BuyMainPage.js:336 redner
E:\lottery\RNLotteryProject\APP\Buy\BuyMainPage.js:336 redner
E:\lottery\RNLotteryProject\node_modules\teaset\components\Toast\Toast.js:43 Toast--duration-time-dataEnd Sat Jul 08 2017 10:02:37 GMT+0800 (**标准时间)
E:\lottery\RNLotteryProject\node_modules\teaset\components\Toast\Toast.js:43 Toast--duration-time-dataEnd Sat Jul 08 2017 10:02:37 GMT+0800 (**标准时间)
[Menu] How to change the menuItem color and backgroundColor ??
NavigationPage中的renderPage会渲染两次,请问是有什么原因吗?
'use strict';
import React, {Component} from 'react';
import {View, ScrollView,Text} from 'react-native';
import {Theme, NavigationPage, NavigationBar, ListRow,TeaNavigator} from 'teaset';
export default class Index extends NavigationPage {
static defaultProps = {...NavigationPage.defaultProps,title: 'index'};
renderPage() {
console.log('somelog'); //----------此处会打印出两次----------//
return (
<ScrollView style={{flex: 1}}>
<ListRow title='Theme' detail='主题' onPress={() => this.navigator.push({view: <View />})} topSeparator='full' />
</ScrollView>
);
}
}
比如多个Text
First of all, I love your work. It is really great. But I have one feature request.
It would be nice if Select component could have a prop for rendering the items and selected item. e.g.
renderItem(item, index) { return (<Text>{item}</Text>); }
This is to replace the getItemText prop.
This open up possibility to make a picker for Images and others.
I saw PopoverPickerItem
already supports this.
Hi, cool library.
But I found something wrong when I used SearchInput in Overlay.
Problem is the input area will be cleared after editing.
So I change the source of SearchInput line if (value === undefined) value = this.state.value;
to value = this.state.value;
in method render()
.
Dont know if this is right. Hope for your fix.
1.要实现类似react-native-scrollable-tab-view
这个库的样式, 使用SegmentedView
之后,发现里面的子页面是一次性加载完成的. 能不能实现react-native-scrollable-tab-view
那样, 按需加载呢?
如果是一次性加载完的, 如果页面都一样,输入请求就是一次性请求完了..
2.还有SegmentedView
里面只提供了onChange
这样的属性,如果我想在滚动的时候,让底部的滚动条颜色改变, 展示上会有问题.
我看了下你的源码:ListRow.js是这么处理图标的
//icon if ((icon || icon === 0) && !React.isValidElement(icon)) { icon = ( <View style={{paddingRight: Theme.rowIconPaddingRight}}> <Image style={{width: Theme.rowIconWidth, height: Theme.rowIconHeight}} source={icon} /> </View> ); }
这样图标只能是图片的时候图标和标题文字之间的间隔 paddingRight 才器作用,
我用到矢量图标的时候出现问题
//导入图标字体,这里使用FontAwesome库
import Icon from 'react-native-vector-icons/FontAwesome';
但是我在图标的样式上增加style={{paddingRight:12}}可以解决,我想应该是你的代码的兼容性出了问题,希望能够纠正过来,要不每次每次都要修复这个小问题也挺麻烦的。
注:我用的是import {StackNavigator} from 'react-navigation';进行导航的,比较流畅一点。
具体代码如下
<ListRow title='时光相册' icon={<Icon name="info-circle" size={20} style={{paddingRight:12}}/>} detail='时光相册' onPress={() => this.navigator.push({view: <AboutScreen />})}/>
事实上没用你的库之前我是这么写的
<TouchableOpacity onPress={() => navigate('NewsDetail')} style={styles.itemContainer}> <Icon name="file-image-o" size={20}/> <Text style={styles.itemText}> 时光相册 </Text> <Icon name="chevron-right"/> </TouchableOpacity>
qq147153531
The issue can be reproduced using the example below:
<Overlay.PopView
modal={true}
style={{flex:1}}
containerStyle={{flex:1}}
>
<ScrollView style={{flex:1}} contentContainerStyle={{flex:1}}>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
<Text>12323213</Text>
</ScrollView>
</Overlay.PopView>
Can I Disable swipe back in TeaNavigator?
是打包jsbundle之后真机运行(iphone 5s)切换页面有点卡,模拟器运行切换不会,不知有没有好的解决方案? @rilyu
hi,大神
还准备开发些新组件吗?比如DatePicker,抽屉组件,等等。。。
Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)
目前的需求是一个TabView中包含了3个NavigationPage。
希望切换TabSheet的时候能够重新渲染页面。
componentWillMount只在第一次加载时触发,能否手动触发。
TabSheet类似于:
<TabView style={{flex: 1}} type={this.state.type}> <TabView.Sheet title='audit' icon={require('../assets/icons/png/audit.png')} activeIcon={require('../assets/icons/png/audit.png')} > <HomePage type={this.state.type} onChangeType={type => this.setState({type})} /> </TabView.Sheet> <TabView.Sheet title='list' icon={require('../assets/icons/png/list.png')} activeIcon={require('../assets/icons/png/list.png')} > <HomePage type={this.state.type} onChangeType={type => this.setState({type})} /> </TabView.Sheet> <TabView.Sheet title='cloud' icon={require('../assets/icons/png/cloud.png')} activeIcon={require('../assets/icons/png/cloud_active.png')} > <MePage type={this.state.type} onChangeType={type => this.setState({type})}/> </TabView.Sheet> </TabView>
homePage中:
componentWillMount() { console.log('componentWillMount'); this.fetchData(); }
给您添麻烦了,先谢过!
如何取得的上(顶部导航栏)中(内容页)下(底部导航栏)三个部分的高度?内容页我想放置一个地图view,但是地图view 的控件被 底部导航栏遮盖了
0.44以后facebook推出了新的导航 来解决卡顿的问题 作者什么时候把新导航加进来啊 老的那个慢慢就废弃掉了
页面类的组件很好用,但是不知道依赖于这也页面组件的页面如何处理传参。
<Input multiline={true} numberOfLines={4} onChangeText={(text) => this.setState({ text })} value={this.state.text} />
我用的是react-navigation,
<ModalIndicator.IndicatorView/>不能覆盖导航栏,
ModalIndicator.show()则可以覆盖,但是在render()中使用会有以下警告:
Cannot update during an existing state transition (such as within render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount
.
RT
紧急求助。我在弹出的视图中做listview的单选控制,数据源改变之后,视图刷新,导致listview 的item切换失败。
Why don't you use navagation to replace the navagator?
why don't you use Flux and Redux
now I find a bug ,when i used SegmentedView.Sheet's title property ,I find if the page status has changed,This component will be rendered
for example ,if i used TextInput or your InputRow,SegmentedView.Sheet's title property it will grab the spotlight,i have no idea to control the TextInput content change caused Title state change
Finally, I hope you can add me QQ56927299 communicate RN together
A弹窗的Input给了 this.state.xxx
点击A的某个按钮弹出B弹出(A弹窗不关闭)
B弹出某个按钮点击后 改变 this.state.xxx 的值,后关闭B弹窗
A弹窗里面的 this.state.xxx 没改变。
求如何改变值
请问如何显示图标本来的颜色呢?
我使用TabView 从当前页跳转到 另外一页 底部的TabView 一直都在 有什么方法让他隐藏吗
1-:感觉功能比较强大,但是项目中只会用一两个,想拆出来,发觉包还是很大的。
2-:可否自定义弹出内容?view视图是否提供自定义?
已经不再更新了吗 作者?
Here are the example code and screenshot highlighted the issue:
<SegmentedView
type='projector'
justifyItem='scrollable'
autoScroll={true}
animated={true}
style={{flex:1}}
>
<SegmentedView.Sheet key={1} title={"view 1"}>
<View>
<ListRow title='List Item 1' detail={'ssss'} topSeparator='full' />
<ListRow title='List Item 2' detail={'ssss'} topSeparator='none'/>
<ListRow title='List Item 3' detail={'ssss'} topSeparator='none'/>
<ListRow title='List Item 4' detail={'ssss'} topSeparator='none' bottomSeparator='full' />
</View>
</SegmentedView.Sheet>
<SegmentedView.Sheet key={2} title={"view 2"}>
<View>
<ListRow title='List Item 1' detail={'2'} topSeparator='full' />
<ListRow title='List Item 2' detail={'ssss'} topSeparator='none'/>
<ListRow title='List Item 3' detail={'ssss'} topSeparator='none'/>
<ListRow title='List Item 4' detail={'ssss'} topSeparator='none' bottomSeparator='full' />
</View>
</SegmentedView.Sheet>
<SegmentedView.Sheet key={3} title={"view 3"}>
<View>
<ListRow title='List Item 1' detail={'3'} topSeparator='full' />
<ListRow title='List Item 2' detail={'ssss'} topSeparator='none'/>
<ListRow title='List Item 3' detail={'ssss'} topSeparator='none'/>
<ListRow title='List Item 4' detail={'ssss'} topSeparator='none' bottomSeparator='full' />
</View>
</SegmentedView.Sheet>
</SegmentedView>
As Overlay introduces TopView as the new top element, the react-redux connect call won't find Provider element for any customised Overlay views added to TopView.
One easy (but not ideal) solution is to manually assign store to each of the Overlay views.
Is there a better solution for this?
'use strict';
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { TeaNavigator } from 'teaset';
import TeasetExampleHome from './views/Home';
import TabPage from './components/TabPage';
import { Theme } from 'teaset';
Theme.set(Theme.themes.default);
Theme.set({
primaryColor: '#1AAD19',
backButtonTitle: '返回',
});
export default class TeasetExample extends Component {
render() {
return <TeaNavigator rootView={} />;
}
}
AppRegistry.registerComponent('example', () => TeasetExample);
“返回”生效的,但是 primaryColor 没有生效
In Example project, each "click" takes about 5 seconds to be processed (navigation from home to some option), and Overlay animations are very slow.
Tested on a low-end device (Moto G XT 1033) and in a mid-end device (Asus ZenFone 2 Selfie).
截图的链接
http://wx3.sinaimg.cn/mw690/900bfde3ly1fgw6iqzyisj20u01hc763.jpg
如果我的页面继承自BasePage 就没有问题,但是继承Component的页面会有这样的效果。
滑动一下就停不下来了一直滚动
可以自定义那个loading的图标吗?我做一个录音的场景录音时想用这个实现累次微信录语音的效果
我在index.android.js使用了 TabView
`export default class TabViewExample extends BasePage {
static defaultProps = {
...BasePage.defaultProps,
scene: TeaNavigator.SceneConfigs.PushFromRight,
};
constructor(props) {
super(props);
Object.assign(this.state, {
type: 'projector',
});
}
renderPage() {
return (
<TabView style={{ flex: 1 }} type={this.state.type} >
<TabView.Sheet
title='主页'
icon={require('./icons/my/home.png')}
activeIcon={require('./icons/my/home_fill.png')}
>
</TabView.Sheet>`
当我进入一个tab后,点击一个按钮,然后整个tabview导航到别的页面,请问这种效果怎么做?
拿微信举个例子,点击“发现”->"朋友圈"
版本0.3.2
AlbumView.js 176行
can't find variable : index
1.Android TransformView 放大SVG ,SVG点击事件 Android SVG onPressLayout 与父组件 TransformView onChildrenPress 事件冲突,ios妥妥的没问题,具体代码如下:
<TransformView
style={{backgroundColor: Theme.pageColor, flex: 1, alignItems: 'center', justifyContent: 'center'}} minScale={0.5}
maxScale={2}
magnetic={true}
onisEidt = {(isEidt) => {
this.isEidt = isEidt;
}}>
<SvgMap
svgJson={svgJsonsCity[leftAreaCode]['svg']}
onChildrenPress={children => {this._onChildrenPress(children)}}
/>
</TransformView>
'use strict';
import React, {Component, PropTypes} from 'react';
import {StyleSheet, View, Dimensions} from 'react-native';
import {Svg, Path, Text} from 'react-native-svg';
export default class SvgMap extends Component {
static propTypes = {
...Svg.propTypes,
svgJson: PropTypes.object.isRequired,
onChildrenPress: PropTypes.func, //(children)
};
constructor(props) {
super(props);
this.pageWidth = Dimensions.get('window').width;
this.pageHeight = Dimensions.get('window').height - 400;
this.padding = 12 * 320/this.pageWidth;
}
getParams() {
let {svgJson} = this.props;
let clientWidth = this.pageWidth - this.padding * 2;
let clientHeight = this.pageHeight - this.padding * 2;
let {x, y, width, height} = svgJson.bounds;
let scaleX = clientWidth / width;
let scaleY = clientHeight / height;
let scale = Math.min(scaleX, scaleY);
let paddingX = this.padding + Math.round((clientWidth - width * scale) / 2) ;
let paddingY = this.padding + Math.round((clientHeight - height * scale) / 2);
return {
x: paddingX,
y: paddingY,
scale: scale,
};
}
renderMainMap(x, y, scale, strokeColor, strokeWidth, fill) {
let {svgJson} = this.props;
let elements = svgJson.paths.map((item, index) => (
<Path
key={svgJson.name + index}
x={x}
y={y}
scale={scale}
d={item}
fill={fill}
stroke={strokeColor}
strokeWidth={strokeWidth / scale}
strokeLinecap='round'
strokeLinejoin='round'
/>
));
return elements;
}
onTouchForChildren(children){
let { onChildrenPress} = this.props;
onChildrenPress(children);
}
renderSubMap(x, y, scale, strokeColor, strokeWidth) {
let {svgJson, onChildrenPress} = this.props;
let elements = [];
let {childrens} = svgJson;
let fillColors = ["#f9c62a", "#a6c2de", "#fc9ecc", "#7df84d", "#ffff00", "#f9c62a", "#a6c2de", "#fc9ecc", "#7df84d", "#ffff00"];
for (let i = 0; i < childrens.length; i++) {
if (svgJson.level === 'city') childrens[i].fillColor = fillColors[i % fillColors.length];
childrens[i].paths.map((item, index) => {
elements.push(
<Path
key={childrens[i].name + 'name' + index}
x={x}
y={y}
scale={scale}
d={item}
fill={childrens[i].fillColor}
stroke={strokeColor}
strokeWidth={strokeWidth / scale}
strokeLinecap='round'
strokeLinejoin='round'
onPressOut={() => this.onTouchForChildren(childrens[i])}
/>
);
});
}
for (let children of childrens) {
elements.push(
<Text
key={children.name + 'text'}
fontSize={5}
x={x + children.center.x * scale}
y={y + children.center.y * scale}
textAnchor="middle"
onPress={() => this.onTouchForChildren(childrens)}
>
{children.name}
</Text>
);
}
return elements;
}
render() {
let {x, y, scale} = this.getParams();
return (
<Svg width={this.pageWidth} height={this.pageHeight}>
{this.renderMainMap(x, y, scale, '#c9cacb', 10, 'none')}
{this.renderSubMap(x, y, scale, '#3ea5dc', 1)}
</Svg>
);
}
}
RT
在Overlay浮层里面使用this.state.xxx
然后在其他地方修改了状态,界面内容不更新,在线等答案
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.