import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { ScrollView, StyleSheet, Text, View, TouchableOpacity, SafeAreaView, Button, Alert,Touchable, Image } from 'react-native';
import favicon from "./assets/favicon.png"
export default function App() {
const customAlert = () => {
Alert.alert("JSX 밖에서 함수 구현 가능!")
}
const customAlert1 = () => {
Alert.alert("폭발직전")
}
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
<view style={styles.containerOne}>
<TouchableOpacity style={styles.textContainer} onPress={customAlert}>
<Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.textContainer} onPress={customAlert}>
<Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.textContainer} onPress={customAlert}>
<Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
</TouchableOpacity>
</view>
<view style={styles.containerTwo}>
<TouchableOpacity style={styles.textContainer} onPress={customAlert}>
<Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.textContainer} onPress={customAlert}>
<Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.textContainer} onPress={customAlert}>
<Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
</view>
<view style={styles.containerThree}>
<TouchableOpacity style={styles.imageContainer} onPress={customAlert1}>
<Image
source={favicon}
resizeMode={"repeat"}
style={styles.imageStyle}
/>
</TouchableOpacity>
</view>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
containerOne: {
flex: 1,
backgroundColor: 'red',
},
containerTwo: {
flex: 1,
backgroundColor: 'blue',
},
containerThree: {
flex: 2,
backgroundColor: 'blue',
},
textContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor:'green',
height:100,
borderColor:'green',
borderWidth:5,
borderRadius:10,
margin:10,
},
textStyle: {
textAlign:"center",
},
imageContainer:{
height:100,
borderColor:'green',
borderWidth:1,
borderRadius:10,
margin:10,
padding:15
},
imageStyle: {
flex: 1,
width: 370,
height: 100
}
});
핸드폰에 비춰지는 화면 기준으로만 부모값을 잡을 수 있나요?
scrollview로 묶인 큰 틀을 부모값으로 잡을 때도 그냥 똑같이 상위 컨테이너이름값에 flex 1 로 설정하면 될까요?
