- 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.
推薦閱讀
- 算法零基礎(chǔ)一本通(Python版)
- Java加密與解密的藝術(shù)(第2版)
- 鋒利的SQL(第2版)
- Python完全自學教程
- The Complete Coding Interview Guide in Java
- Building Serverless Applications with Python
- Working with Odoo
- 時空數(shù)據(jù)建模及其應(yīng)用
- SQL Server 2008中文版項目教程(第3版)
- OpenCV with Python Blueprints
- Python期貨量化交易實戰(zhàn)
- 大學計算機基礎(chǔ)實訓教程
- 算法精解:C語言描述
- 程序員的英語
- Learning Google Apps Script