- 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.
推薦閱讀
- 精通Nginx(第2版)
- SOA實(shí)踐
- SQL Server 2016從入門到精通(視頻教學(xué)超值版)
- CentOS 7 Server Deployment Cookbook
- Getting Started with PowerShell
- Python高級(jí)機(jī)器學(xué)習(xí)
- Ray分布式機(jī)器學(xué)習(xí):利用Ray進(jìn)行大模型的數(shù)據(jù)處理、訓(xùn)練、推理和部署
- Mastering Android Game Development
- HTML5+CSS3 Web前端開發(fā)技術(shù)(第2版)
- Citrix XenServer企業(yè)運(yùn)維實(shí)戰(zhàn)
- SpringBoot從零開始學(xué)(視頻教學(xué)版)
- 零基礎(chǔ)輕松學(xué)C++:青少年趣味編程(全彩版)
- scikit-learn Cookbook(Second Edition)
- Visual Basic語言程序設(shè)計(jì)基礎(chǔ)(第3版)
- 軟件設(shè)計(jì)模式(Java版)