- 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.
推薦閱讀
- Learning Scala Programming
- Python數據分析入門與實戰
- Mastering Ember.js
- Julia機器學習核心編程:人人可用的高性能科學計算
- Mastering Yii
- 軟件品質之完美管理:實戰經典
- C# and .NET Core Test Driven Development
- OpenCV with Python By Example
- Learning Material Design
- Unity 2018 Augmented Reality Projects
- Visual Studio Code 權威指南
- 從零開始學Android開發
- Learning Splunk Web Framework
- Drupal 8 Development Cookbook(Second Edition)
- Clojure編程樂趣