- Hands-On Design Patterns with React Native
- Mateusz Grzesiukiewicz
- 167字
- 2021-08-13 15:13:00
The Button component
Button is such a common component that you will find yourself using it in any kind of app. Let's build a small like counter with up and down buttons:
// Chapter 2 / Example 7 / src / LikeCounter.js
class LikeCounter extends React.Component {
state = {
likeCount: 0
}
// like/unlike function to increase/decrease like count in state
like = () => this.setState({likeCount: this.state.likeCount + 1})
unlike = () => this.setState({likeCount: this.state.likeCount - 1})
render = () => (
<View style={styles.container}>
<Button
onPress={this.unlike}
title="Unlike"
/>
<Text style={styles.text}>{this.state.likeCount}</Text>
<Button
onPress={this.like}
title="Like"
/>
</View>
);
}
// Styles omitted for clarity
Further modifications to this concept can implement upvotes/downvotes for comments or a star system for reviews.
The Button component is very limited, and those who are used to web development may be surprised. For instance, you cannot set the text in a web-way, for example, <Button>Like</Button>, nor can you pass the style prop. If you need to style your button, please use TouchableXXXX. Check out the next section for an example on TouchableOpacity.
推薦閱讀
- .NET之美:.NET關鍵技術深入解析
- Building Modern Web Applications Using Angular
- Python數據可視化:基于Bokeh的可視化繪圖
- Flask Web開發(fā)入門、進階與實戰(zhàn)
- Python程序設計案例教程
- Full-Stack Vue.js 2 and Laravel 5
- Spring Security Essentials
- 算法圖解
- Photoshop智能手機APP界面設計
- DevOps 精要:業(yè)務視角
- 深入淺出 HTTPS:從原理到實戰(zhàn)
- Java 11 and 12:New Features
- 虛擬現(xiàn)實:引領未來的人機交互革命
- Cocos2D Game Development Essentials
- Java與Android移動應用開發(fā):技術、方法與實踐