❯ pwd        
/Users/yoshitaka.koitabashi/Desktop/iLearn/src/components

~/Desktop/iLearn/src/components
❯ tree .             
.
├── alsContent.tsx
├── contentsSelect.tsx
├── falcon9Content.tsx
├── header.tsx
└── spaceContent.tsx

0 directories, 5 files

import'react-native-gesture-handler';importReact,{useRef,useEffect}from'react';import{SafeAreaView,ScrollView,StyleSheet,Animated,TouchableOpacity,}from'react-native';import{Card,Title}from'react-native-paper';import{createStackNavigator}from'@react-navigation/stack';importAppHeaderfrom'./header';importspaceContentfrom'./spaceContent';importalsContentsfrom'./alsContent';importfalcon9Contentsfrom'./falcon9Content';constcontents=({navigation})=>{constfadeSpace=useRef(newAnimated.Value(0)).current;constfadeAls=useRef(newAnimated.Value(0)).current;constfadeFalcon9=useRef(newAnimated.Value(0)).current;constspaceContentFadeIn=()=>{Animated.timing(fadeSpace,{toValue:1,duration:500,useNativeDriver:true,}).start();};constalsContentsFadeIn=()=>{Animated.timing(fadeAls,{toValue:1,duration:2000,useNativeDriver:true,}).start();};constfalcon9ContentsFadeIn=()=>{Animated.timing(fadeFalcon9,{toValue:1,duration:3000,useNativeDriver:true,}).start();};useEffect(()=>{spaceContentFadeIn();alsContentsFadeIn();falcon9ContentsFadeIn();});return(<SafeAreaViewstyle={styles.container}><ScrollViewcontentContainerStyle={styles.contentContainer}><TouchableOpacityonPress={()=>{navigation.navigate('Home');}}><AppHeader/></TouchableOpacity>
<Animated.Viewstyle={[{opacity:fadeSpace}]}><CardonPress={()=>navigation.navigate('宇宙って？')}style={styles.cardPadding}><Card.Content><Titlestyle={styles.cardTitle}>宇宙って？</Title>
<Card.Coversource={require('../../public/img/alien.png')}style={styles.cardImg}/>
</Card.Content>
</Card>
</Animated.View>
<Animated.Viewstyle={[{opacity:fadeAls}]}><CardonPress={()=>navigation.navigate('ALSって知ってる？')}style={styles.cardPadding}><Card.Content><Titlestyle={styles.cardTitle}>ALSって知ってる？</Title>
<Card.Coversource={require('../../public/img/health.png')}style={styles.cardImg}/>
</Card.Content>
</Card>
</Animated.View>
<Animated.Viewstyle={[{opacity:fadeFalcon9}]}><CardonPress={()=>navigation.navigate('Falcon9がすごい')}style={styles.cardPadding}><Card.Content><Titlestyle={styles.cardTitle}>Falcon9がすごい</Title>
<Card.Coversource={require('../../public/img/startup_isometric.png')}style={styles.cardImg}/>
</Card.Content>
</Card>
</Animated.View>
</ScrollView>
</SafeAreaView>
);};constStack=createStackNavigator();constcontentsSelect=()=>(<Stack.Navigator><Stack.Screenname="知識の森"component={contents}/>
<Stack.Screenname="宇宙って？"component={spaceContent}/>
<Stack.Screenname="ALSって知ってる？"component={alsContents}/>
<Stack.Screenname="Falcon9がすごい"component={falcon9Contents}/>
</Stack.Navigator>
);conststyles=StyleSheet.create({container:{flex:1,},cardImg:{height:300,},cardPadding:{top:60,marginBottom:20,borderRadius:5,marginLeft:20,marginRight:20,},cardTitle:{fontWeight:'bold',},contentContainer:{paddingBottom:50,},});exportdefaultcontentsSelect;

navigation.navigate('Home');
navigation.dispatch(StackActions.popToTop());

import*asReactfrom'react';import{ScrollView,StyleSheet,View,Image,TouchableOpacity,}from'react-native';import{Card,Paragraph,Chip,Avatar,Title,}from'react-native-paper';import{StackActions}from'@react-navigation/native';import{Text}from'react-native-elements';importAppHeaderfrom'./header';constspaceContent=({navigation})=>(<Viewstyle={styles.container}><ScrollViewcontentContainerStyle={styles.contentContainer}><TouchableOpacityonPress={()=>{navigation.navigate('Home');navigation.dispatch(StackActions.popToTop());}}><AppHeader/></TouchableOpacity>
<Cardstyle={styles.cardPadding}><Card.Content><Titlestyle={styles.cardTitle}>宇宙ってなんだろう？？</Title>
<Card.Coversource={require('../../public/img/alien.png')}/>
</Card.Content>
</Card>
<Cardstyle={styles.cardPadding}><Card.Content><Paragraphstyle={styles.nextCardMessage}>Topics</Paragraph>
<Viewstyle={styles.row}><Chipstyle={styles.chip}><Textstyle={styles.chipText}>宇宙開発</Text>
</Chip>
<Chipstyle={styles.chip}><Textstyle={styles.chipText}>Jaxa</Text>
</Chip>
<Chipstyle={styles.chip}><Textstyle={styles.chipText}>ISS</Text>
</Chip>
</View>
</Card.Content>
</Card>
<Cardstyle={styles.cardPadding}><Card.Content><Paragraphstyle={styles.nextCardMessage}>作者</Paragraph>
<Viewstyle={styles.row}><Avatar.Imagesize={70}source={require('../../public/img/space-travel.png')}/>
<Textstyle={styles.avatarMessage}>KoitabashiYoshitaka</Text>
</View>
</Card.Content>
</Card>
<Cardstyle={styles.cardPadding}><Card.Content><Paragraphstyle={styles.nextCardMessage}>物語</Paragraph>
<Texth3style={styles.storyTitle}>はじめに</Text>
<Textstyle={styles.storyBody}>宇宙の誕生は、約138億年前のビッグバンから始まります。</Text>
<Imagesource={require('../../public/img/moon2.png')}style={{width:300,height:200}}/>
<Texth4style={styles.storyTitle}>ビックバンって、何〜？</Text>
<Textstyle={styles.storyBody}>人間のまばたきよりも短い時間の中で起こった超・高エネルギーの爆発ビックバンです。ビッグバンにより、小さな物質同士が結合し合い、星の素となるチリやガスが生まれました。{'\n'}さらに、それらの物質がくっつき合い、恒星や惑星といった星々が生まれたのです。{'\n'}</Text>
<Imagesource={require('../../public/img/moon1.png')}style={{width:300,height:200}}/>
<Textstyle={styles.storyBody}>誕生以来、宇宙は膨張を続けており、その膨張は加速し続けているといわれています。{'\n'}そのため、宇宙の大きさは現在の科学でも解明できていません。</Text>
</Card.Content>
</Card>
</ScrollView>
</View>
);conststyles=StyleSheet.create({container:{flex:1,},backButton:{paddingTop:10,paddingBottom:10,},cardPadding:{textAlign:'center',top:60,marginBottom:20,borderRadius:5,marginLeft:20,marginRight:20,},cardTitle:{marginBottom:15,fontSize:20,fontWeight:'bold',},cardMessage:{marginTop:15,fontSize:20,fontWeight:'bold',},nextCardMessage:{marginBottom:20,fontSize:20,fontWeight:'bold',},row:{flexDirection:'row',flexWrap:'wrap',paddingHorizontal:12,},chip:{backgroundColor:'#2096F3',margin:2,},chipText:{color:'#ffffff',},avatarMessage:{marginLeft:30,marginTop:20,fontWeight:'bold',textAlign:'left',},storyTitle:{marginTop:20,marginBottom:20,fontWeight:'bold',},storyBody:{marginTop:20,fontWeight:'bold',},contentContainer:{paddingBottom:60,},});exportdefaultspaceContent;