반응형
TouchableOpacity / TouchableHighlight / TouchableWithoutFeedback / Pressable
Props로 onPress로 이벤트를 부여할 수 있다.
TOpacity 경우 천천히 투명도가 0에서 1로 가는 느낌이고
THighlight 경우 반짝 하는 느낌
TWithoutFeedback은 아무 효과가 없다
또한 문서를 참조하여 props를 추가해 다른 효과들을 바꿔줄 수 있다.
Pressalbe은 TWithoutFeedback 과 비슷하지만 더 새로운 것이다. 이를 가지고 onLongPress같은 것들을 사용할 수 있다.
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
Pressable,
} from "react-native";
export default function App(){
const [active, setActive] = useState(true);
const travel = () => setActive(false);
const work = () => setActive(true);
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View style={styles.header}>
<TouchableOpacity onPress={work}>
<Text>
Work
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={travel}>
<Text>
Travel
</Text>
</TouchableOpacity>
</View>
</View>
);
}
TextInput
- react-native TextInput (https://reactnative.dev/docs/0.70/textinput)
import {StatusBar} from "expo-status-bar";
import {
StyleSheet,
Text,
View,
TextInput,
} from "react-native";
import {theme} from "./color";
import {useEffect, useState} from "react";
export default function App() {
const [text, setText] = useState("");
const travel = () => setActive(false);
const work = () => setActive(true);
const textChange = (payload) => setText(payload);
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View>
<TextInput
style={styles.input}
placeholder={active ? "ADD TODO" : "WHERE DO YOU WANNA GO?"}
keyboardType="default"
returnKeyType="done"
onChangeText={textChange}
onSubmitEditing={addTodo}
value={text}
/>
</View>
</View>
);
}
//style
input: {
backgroundColor: "white",
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20,
marginTop: 20,
fontSize: 18,
marginVertical: 20,
},
처음에 TextInput사용하게 되면 화면에 나오지 않아 당황할수도 있다. 그럴땐 스타일링을 줘 배경색을 다르게 해보자.
keyboardType으로 모바일의 키보드 종류에 맞는 배열로 바꿔줄수 있다.
props는 android에서 호환되는것과 ios에서 호환되는것들이 혹은 둘다 호환되는 것들이 있으니 잘 참고해서 사용하자
onSubmitEditing으로 submit을 할수 있게 만들수 있다.
AsyncStorage
- Expo AsyncStorage 관련 문서(https://docs.expo.dev/versions/latest/sdk/async-storage/)
- 사용방법 (https://react-native-async-storage.github.io/async-storage/docs/usage/)
npx expo install @react-native-async-storage/async-storage
이를 사용하기 위해서는 try catch 문을 사용할것을 강력권고한다.
Alert API
- Alert API 관련 문서(https://reactnative.dev/docs/0.70/alert)
Alert API는 대화창을 실행시킨다. 두가지 옵션이 있는데 alert()과 prompt()가 잇는데 prompt는 ios에서만 작동 가능하다.
Alert.alert(제목, 내용?, 버튼?, 옵션?)
//? 표시는 type자로 required가 아님을 나타냄
// 버튼은 array of object로 text / onPress / style 을 넣을 수 있으며 style은 ios 한정이다. const deleteTodo = async (key) => {
Alert.alert("R U SURE?", "REALLY DELETE?", [
{text: "cancel"},
{
text: "ok",
style: "destructive",
onPress: async () => {
const newToDos = {...toDos};
delete newToDos[key];
setToDos(newToDos);
await saveToDos(newToDos);
},
},
]);
return;
};
728x90
'React-Native > Basic with Expo' 카테고리의 다른 글
| React-Native__Basic-001 with EXPO (0) | 2023.11.16 |
|---|---|
| React-Native__Basic-002 with EXPO (0) | 2023.11.15 |