ຕົວຢ່າງ Code ຂອງແອັບ ນັບເລກ ແບບ Basic ທີ່ສຸດ:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
code ຂອງ file App.js
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
number: 0
}
}
render() {
return (
<View style={styles.container}>
<Text>Number Counter</Text>
<Text style={{ fontSize: 100, fontWeight: 'bold', color: 'red' }}>{this.state.number}</Text>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
onPress={() => this.coutUp()}
style={{
alignContent: 'center',
justifyContent: 'center',
backgroundColor: 'green',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 30,
paddingRight: 30,
borderRadius: 5,
width: 100
}}>
<Text style={{ alignSelf: 'center', color: 'white' }}>up</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.coutDown()}
style={{
alignContent: 'center',
justifyContent: 'center',
backgroundColor: 'red',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 30,
paddingRight: 30,
borderRadius: 5,
width: 100
}}>
<Text style={{ alignSelf: 'center', color: 'white' }}>down</Text>
</TouchableOpacity>
</View>
</View >
);
}
coutUp() {
this.setState({ number: this.state.number + 1 });
}
coutDown() {
if (this.state.number > 0) {
this.setState({ number: this.state.number - 1 });
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
ສົນໃຈຮຽນ ຕິດຕໍ່ SCDev
