다른건 다 알겠지만 Scrollview 첫번째꺼 및 두번째 scrollview가 작동하지 않습니다. 해결방법과 오류의 원인을 알고싶습니다.
mport React from "react";
import {ScrollView, Text, Image, View, StyleSheet, TouchableOpacity, Alert} from "react-native";
export default function App() {
const customAlert = () => {
Alert.alert('당첨')
}
return (
<ScrollView style={styles.container}>
<View style={styles.textcontainer}>
<Text style={styles.textStyle1}> 나만의 꿀팁</Text>
</View>
<Image style={styles.imageStyle1}
source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c' }}
resizeMode={'cover'}
/>
<ScrollView horizontal={true}
style={styles.containertwo}
contentContainerStyle = {{flexDirection: 'row'}}
showsHorizontalScrollIndicator = {true}>
<TouchableOpacity style={styles.OpacityContainer1} onPress={customAlert}>
<Text style={styles.textStyle2}>이용</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.OpacityContainer2} onPress={customAlert}>
<Text style={styles.textStyle2}>제테크</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.OpacityContainer3} onPress={customAlert}>
<Text style={styles.textStyle2}>반려견</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.OpacityContainer4} onPress={customAlert}>
<Text style={styles.textStyle2}>게임</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.OpacityContainer5} onPress={customAlert}>
<Text style={styles.textStyle2}>할인</Text>
</TouchableOpacity>
</ScrollView>
<View style={styles.containerThree}>
<View style = {styles.innercontainerOne}>
<Image
source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3' }}
resizeMode={'cover'}
style={styles.imageStyle2}
/>
</View>
<View style={styles.innercontainerTwo}>
<Text style={styles.textStyle3}> 세상에서 가장 맛있는 피자</Text>
<Text style={styles.textStyle4} numberOfLines={3}> 먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께</Text>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
textcontainer: {
height: 100,
borderColor: '#fff',
justifyContent: 'flex-end',
borderWidth: 2,
margin: 30,
},
textStyle1: {
textAlign: 'left',
fontWeight: 'bold',
fontSize: 20
},
imageStyle1: {
width:"90%",
height: 300,
// marginLeft: 20,
// marginRight: 20,
padding: 10,
borderRadius: 20,
alignSelf: 'center',
},
containertwo:{
//marginHorizontal: 20,
margin: 5,
padding: 10,
indicatorStyle:"red",
horizontal: true,
},
textStyle2:{
textAlign:"center",
color: "#fff",
},
customIndicator: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 5,
backgroundColor: 'black',
},
OpacityContainer1:{
height: 70,
width:"30%",
backgroundColor: '#f194ff',
bordercolor: '#f194ff',
borderRadius: 20,
margin:10,
justifyContent: 'center',
},
OpacityContainer2:{
height: 70,
width:"30%",
backgroundColor: '#2C9E58',
bordercolor: '#2C9E58',
borderRadius: 20,
margin:10,
justifyContent: 'center',
},
OpacityContainer3:{
height: 70,
width:"30%",
backgroundColor: '#4C2C9E',
bordercolor: '#4C2C9E',
borderRadius: 20,
margin:10,
justifyContent: 'center',
},
OpacityContainer4:{
height: 70,
width:"30%",
backgroundColor: '#EC9900',
bordercolor: '#EC9900',
borderRadius: 20,
margin:10,
justifyContent: 'center',
},
OpacityContainer5:{
height: 70,
width:"30%",
backgroundColor: '#19B2C9',
bordercolor: '#19B2C9',
borderRadius: 20,
margin:10,
justifyContent: 'center',
},
containerThree:{
flex: 1,
flexDirection: 'row',
},
innercontainerOne:{
flex:1
},
innercontainerTwo:{
flex:2
},
imageStyle2:{
width:"90%",
height: 100,
marginRight: 10,
marginLeft: 9,
borderRadius: 10,
},
textStyle3:{
fontSize: 20,
fontWeight: 'bold',
marginRight: 5,
borderColor : '#000',
},
textStyle4:{
borderColor : '#000',
numberOfLines : 'tail',
},
});
