Prøvde for gøy å lage en liten app i React Native, selv om jeg har svært begrenset erfaring med React, og ingen med React Native.
Først lagde jeg et React Native project i IntelliJ Ultimate. Se
reactnative.dev for mer info.
Lagde så et component kalt Calculator.js som jeg la i ./components/Calculator.js
Kode
import React, {useState, useEffect} from 'react';
import {SafeAreaView, StyleSheet, Text, TextInput} from 'react-native';
const Calculator = () => {
// Hooks
const [kfactor, setKfactor] = useState(0);
const [length, setLength] = useState(0);
const [weight, setWeight] = useState(0);
// Oppdaterer kfactor når length og weight endres
useEffect(() => {
if (weight > 0 && length > 0) {
setKfactor((weight * 100) / (length * length * length));
}
}, [weight, length]);
// Returnerer JSX
return (
<SafeAreaView>
<Text style={styles.text}>K-Factor: {kfactor.toFixed(2)}</Text>
<Text>Grams:</Text>
<TextInput
style={styles.input}
onChangeText={setWeight}
value={weight}
placeholder="Weight in grams..."
keyboardType="numeric"
/>
<Text>Centimeters:</Text>
<TextInput
style={styles.input}
onChangeText={setLength}
value={length}
placeholder="Length in centimeters..."
keyboardType="numeric"
/>
</SafeAreaView>
);
};
// Styling
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
},
text: {
fontSize: 30,
},
});
export default Calculator;
Og i ./App.js importerer jeg komponenten jeg lagde:
Kode
import React from 'react';
import Calculator from './components/Calculator';
const App: () => Node = () => {
return <Calculator />;
};
export default App;
Resultat:
Sikkert masse bad practices og bugs og alt mulig rart, men skal ikke så mye til for å lage en enkel app i Android
Sist endret av sudo; 29. mai 2021 kl. 17:19.
