探秘React Native的编程修炼之道:React Native Katas
由于原代码已经是一个很好的示例,下面是一个简化的核心函数,展示了如何在React Native中创建一个简单的计数器应用程序:
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.text}>Count: {count}</Text>
<Button
title="Increment"
onPress={() => setCount(count + 1)}
/>
<Button
title="Decrement"
onPress={() => setCount(count - 1)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
margin: 10,
},
});
这段代码展示了如何使用React Native的useState
钩子来创建一个状态管理的计数器。它包括一个文本标签显示当前计数,两个按钮用于增加和减少计数。代码简洁,注重教学,适合作为React Native初学者的练习。
评论已关闭