Skip to content

Yui button #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yuanyuli wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Yui button #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
92c34ee
功能增加 :
Jun 22, 2016
28e4bc0
Btton 添加Disabled 属性时 背景呈灰色
Jun 22, 2016
3e9c219
增加animations属性
Jun 22, 2016
aa7e86f
修正安卓上不能显示动画的问题
Jun 23, 2016
665a172
Change
Jun 24, 2016
3deccb7
1 文本输入更改为
Jun 27, 2016
8919cde
更改图片Souce变更时显示ActiveSource的解决方式
Jun 27, 2016
041a845
删除Demo.js 文件中多余的Export
Jun 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions demo/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ import ViewPagerDemo from './demos/ViewPagerDemo';
import TabBarDemo from './demos/TabBarDemo';
import MediaKitDemo from './demos/MediaKitDemo';




export default class Demo extends Component {
render() {
return (
Expand Down
295 changes: 281 additions & 14 deletions demo/demos/ButtonDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,302 @@ import {
TouchableHighlight,
View,
Text,
PixelRatio
PixelRatio,
LayoutAnimation,
ScrollView,
StyleSheet
} from 'react-native';

import {Button} from 'react-native-yui';
import DemoSection from './DemoSection';

export default class ButtonDemo extends Component {

render() {
var animations = {
duration: 200,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.easeInEaseOut,
},
};

return (
<Button
style={{margin: 10, height: 40, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
fontStyle={{fontSize: 16, color: '#0033FF'}}
activeBackgroundColor={'#0033FF'}
activeFontColor={'white'}
onLongPress={() => {
<ScrollView style={{backgroundColor:'white',flex:1}}>
<DemoSection
title='文本Button'
style={{flex:1}}
containerStyle={{flexDirection:'row',justifyContent:'center'}}
>
<Button
style={{justifyContent:'center',height: 40,width:100,alignSelf:'center',backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 50}}
fontStyle={{fontSize: 16, color: '#0033FF',alignSelf:'center',fontWeight:'600',letterSpacing:0,lineHeight:0}}
activeStyle={{height: 40,width:150, alignSelf:'center',backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
activeFontStyle={{fontSize: 16, color: '#0033FF',alignSelf:'center',fontWeight:'600',letterSpacing:0,lineHeight:0}}
text='改变文本'
activeText='文本改变'
animated={true}
animations={animations}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>
</Button>
<Button
style={{marginLeft:30, height: 40,width:100,alignSelf:'center',backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 50}}
fontStyle={{fontSize: 16, color: '#0033FF',alignSelf:'center',fontWeight:'600',letterSpacing:0,lineHeight:0}}
activeStyle={{marginLeft:30, height: 40,width:150, alignSelf:'center',backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
activeFontStyle={{fontSize: 16, color: 'red',alignSelf:'center',fontWeight:'900',letterSpacing:0,lineHeight:0}}
text='改变字体'
activeText='改变字体'
animated={true}
animations={animations}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>
</Button>
</DemoSection>
<DemoSection
title='图像Button'
style={{flex:1}}
containerStyle={{flexDirection:'row',justifyContent:'center'}}
>
<Button
style={{marginTop:10,alignSelf:'center',height: 40,width:40, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 20}}
imageStyle={{height:50,width:50}}
activeStyle={{marginTop:0,alignSelf:'center',height: 60,width:60, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
activeImageStyle={{width:200,height:200}}
animated={true}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>

</Button>
<Button
style={{marginLeft:20,marginTop:10,alignSelf:'center',height: 40,width:40, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 20}}
imageStyle={{height:50,width:50}}
activeStyle={{marginLeft:20,marginTop:0,alignSelf:'center',height: 60,width:60, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
animated={true}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>

</Button>
<Button
style={{marginLeft:20,marginTop:10,alignSelf:'center',height: 40,width:40, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 20}}
imageStyle={{height:50,width:50}}
activeStyle={{marginLeft:20,marginTop:0,alignSelf:'center',height: 60,width:60, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
activeImageStyle={{width:50,height:50}}
animated={true}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>

</Button>
<Button
style={{marginLeft:20,marginTop:10,alignSelf:'center',height: 40,width:40, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 20}}
imageStyle={{height:50,width:50}}
activeStyle={{marginLeft:20,marginTop:0,alignSelf:'center',height: 60,width:60, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
activeSource={require('../jpg/headHighLight.jpg')}
activeImageStyle={{width:50,height:50}}
animated={true}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>

</Button>
</DemoSection>
<DemoSection
title='图文Button'
style={{flex:1}}
containerStyle={{flexDirection:'row',justifyContent:'center'}}
>
<Button
style={{marginTop:10,alignSelf:'center', height: 55,width:80, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
imageStyle={{height:50,width:50}}
activeStyle={{marginTop:10,alignSelf:'center',height: 55,width:100, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
text="左⬅️️"
animated={true}
type="iconLeft"
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>
</Button>
<Button
style={{marginLeft:10,marginTop:10,alignSelf:'center', height: 65,width:55, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
imageStyle={{height:50,width:50}}
activeStyle={{marginLeft:10,marginTop:0,alignSelf:'center',height: 85,width:55, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
text="上⬆️"
animated={true}
type="iconTop"
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>
</Button>
<Button
style={{marginLeft:10,marginTop:10,alignSelf:'center', height: 65,width:55, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
imageStyle={{height:50,width:50}}
activeStyle={{marginLeft:10,marginTop:0,alignSelf:'center',height: 85,width:55, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
source={require('../jpg/head.jpg')}
text="下⬇"
animated={true}
type="iconBottom"
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>

</Button>
<Button
style={{marginLeft:10,marginTop:10,alignSelf:'center', height: 55,width:80, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
imageStyle={{height:50,width:50}}
text="右➡️"
source={require('../jpg/head.jpg')}
activeImageStyle={{width:50,height:50}}
activeStyle={{marginLeft:10,marginTop:10,alignSelf:'center',height: 55,width:100, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
animated={true}
type="iconRight"
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
console.log('onPressOut...');
}}
>
</Button>

</DemoSection>
<DemoSection
title='DisableButton'
style={{flex:1}}
containerStyle={{justifyContent:'center'}}
>
<Button
style={{marginTop:10,alignSelf:'center', height: 70,width:70, backgroundColor: 'white', borderWidth: 1 / PixelRatio.get(), borderColor: '#0033FF', borderRadius: 5}}
imageStyle={{height:50,width:50}}
source={require('../jpg/head.jpg')}
text="Disabled"
animated={true}
disabled={true}
onLongPress={() => {
console.log('onLongPress...');
}}
onPress={() => {
onPress={() => {
console.log('onPress...');
}}
onPressIn={() => {
onPressIn={() => {
console.log('onPressIn...');
}}
onPressOut={() => {
onPressOut={() => {
console.log('onPressOut...');
}}
>
安 装
</Button>
>
</Button>
</DemoSection>
</ScrollView>
);
}
}
}
2 changes: 1 addition & 1 deletion demo/demos/DemoList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const dataSource = ds.cloneWithRowsAndSections({
},
{
name: 'Button',
desc: '具有高亮变化的按钮'
desc: '可设置图片和文字的按钮'
},
{
name: 'ViewPager',
Expand Down
5 changes: 4 additions & 1 deletion demo/demos/DemoSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import {
export default class DemoSection extends Component {

render() {

let {containerStyle} = this.props;

return (
<View
style={[this.props.style, {flexDirection: 'column', margin: 5, borderColor: '#ccc', borderWidth: 1 / PixelRatio.get(), borderRadius: 2}]}>
Expand All @@ -18,7 +21,7 @@ export default class DemoSection extends Component {
</View>

<View
style={{paddingHorizontal: 5, paddingVertical: 8}}>
style={{...containerStyle, paddingHorizontal: 5, paddingVertical: 8}}>
{this.props.children}
</View>
</View>
Expand Down
Binary file added demo/jpg/head.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/jpg/headHighLight.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading