IT 유용한 정보

[ react-native ] 화면 이동

JooKit 주킷 2021. 1. 19. 14:46
목차 접기
728x90
반응형

방법 1

import React, { Component } from 'react';  
import { View, Text, StyleSheet, Button, Alert } from 'react-native';

let context: any;  
class Test extends Component<any, any> {

constructor(props: any)  
{  
super(props);  
context: this;  
state:  
{  
text: 'test'


}

}

componentDidMount()  
{  
//setTimeout(() => { this.props.navigation.navigate('wallpaper') }, 3000 );  
}

render()  
{  
return (  

<View style={{ marginTop: 50 }}>  
Hello World????????  
<Button title="test Button" onPress={() => Alert.alert('hoho')} />  


  </View>
)


}  
}

const styles = StyleSheet.create({  
test:  
{  
color: 'red',  
fontWeight: 'bold',  
fontSize: 50  
}  
})

export default Test;  

방법 2

import React, { Component } from 'react';  
import { View, Text, StyleSheet, Button, Alert } from 'react-native';

let context: any;  
class Test extends Component<any, any> {

constructor(props: any)  
{  
super(props);  
context: this;  
state:  
{  
text: 'test'

}

}

componentDidMount()  
{  
//setTimeout(() => { this.props.navigation.navigate('wallpaper') }, 3000 );  
}

// 방법2  
clicked()  
{  
this.props.navigation.navigate('wallpaper');  
}

render()  
{  
return (  

<View style={{ marginTop: 50 }}>  
Hello World????????  
<Button title="test Button" onPress={() => Alert.alert('hoho')} />  

// 방법2  

<Button title="TITLE" onPress={()=>this.clicked()} />  


)  
}  
}

const styles = StyleSheet.create({  
test:  
{  
color: 'red',  
fontWeight: 'bold',  
fontSize: 50  
}  
})

export default Test;  
728x90
반응형
LIST