[英]React Native Stack navigator - onPress to another page
我是本機反應的新手,並試圖讓我的按鈕導航到 SignUpEmail 頁面。 我最初在 GetStartedButton 代碼中使用了 onPress,但最近嘗試將其放入實際的welcome.js 頁面中,因為它可以從正在呈現的堆棧中看到導航器。 我似乎無法弄清楚如何讓我的按鈕將我引導到我想要的頁面。 非常感謝任何見解! 謝謝你。
我收到錯誤,它在 GetStartedButton.js 的第 23 行中找不到導航,它在 onPress 之后立即指向括號集
應用程序.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import WelcomePage from './src/pages/Welcome';
import SignUpEmailPage from './src/pages/SignUpEmail'
import {createStackNavigator} from '@react-navigation/stack';
const Stack = createStackNavigator();
export default class App extends Component {
createHomeStack = () =>
<Stack.Navigator>
<Stack.Screen name="Welcome" component= {Welcome}/>
<Stack.Screen name="SignUpEmail" component= {SignUpEmail}/>
</Stack.Navigator>
render() {
return (
<View style={styles.welcomeScreen}>
<WelcomePage/>
</View>
)
}
}
const styles = StyleSheet.create({
welcomeScreen: {
flex: 1,
backgroundColor: 'black'
},
signupemailScreen: {
flex: 1,
backgroundColor: '#272933'
}
}
);
GetStartedButton.js <-- 只是按鈕
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Animated } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
export default class GetStartedButton extends Component {
constructor(props) {
super(props)
this.fadeAnimation = new Animated.Value(0)
}
componentDidMount() {
Animated.timing(this.fadeAnimation, {
toValue: 1,
duration: 5000,
useNativeDriver: true,
}).start()
}
render(){
return(
<Animated.View style={[styles.container, { opacity: this.fadeAnimation}]}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('SignUpEmail')} >
<LinearGradient
colors={['#DB004C','#FC008E']}
style={styles.linearGradient}
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}
>
<Text style={styles.text}>
Get Started
</Text>
</LinearGradient>
</TouchableOpacity>
</Animated.View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
linearGradient: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
width: 340,
padding: 20,
},
text: {
color: 'white',
fontSize: 20,
justifyContent: 'center',
alignItems: 'center',
}
});
Welcome.js <--啟動按鈕所在的頁面
import { createStackNavigator } from '@react-navigation/stack';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Animated, TouchableOpacity} from 'react-native';
import GetStartedButton from '../components/GetStartedButton';
export default class WelcomePage extends Component {
constructor(props) {
super(props)
this.fadeAnimation = new Animated.Value(0)
}
componentDidMount() {
Animated.timing(this.fadeAnimation, {
toValue: 1,
duration: 5000,
useNativeDriver: true,
}).start()
}
render() {
return (
<View style={styles.containerMain}>
<View style={styles.containerClub}>
<Animated.Text style={[styles.title, { opacity: this.fadeAnimation}]}>Word</Animated.Text>
</View>
<View style={styles.containerCaption}>
<Animated.Text style={[styles.caption, { opacity: this.fadeAnimation}]}> words words words </Animated.Text>
</View>
<View style={styles.containerBottom}>
<GetStartedButton/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
containerClub: {
position: 'absolute',
bottom: 288
},
containerCaption: {
position: 'absolute',
bottom: 250
},
/* To style the button and positioning*/
containerBottom: {
position: 'absolute',
bottom: 100
},
/* To style "Word"*/
title: {
color: 'white',
fontSize: 35,
fontWeight: "bold",
},
/* To style "Words words words"*/
caption:
{
color: 'white',
fontSize: 16
},
line: {
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
}
)
最終 Output:
進行以下更改:
應用程序.js :
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import WelcomePage from './WelCome';
import SignUpEmailPage from './Signup';
const Stack = createStackNavigator();
export default class App extends Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={WelcomePage} />
<Stack.Screen name="SignUpEmail" component={SignUpEmailPage} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
歡迎.js: :
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Animated,
TouchableOpacity,
} from 'react-native';
import GetStartedButton from './GetStartedButton';
export default class WelcomePage extends Component {
constructor(props) {
super(props);
this.fadeAnimation = new Animated.Value(0);
}
componentDidMount() {
Animated.timing(this.fadeAnimation, {
toValue: 1,
duration: 5000,
useNativeDriver: true,
}).start();
}
render() {
return (
<View style={styles.containerMain}>
<View style={styles.containerClub}>
<Animated.Text
style={[styles.title, { opacity: this.fadeAnimation }]}>
Word
</Animated.Text>
</View>
<View style={styles.containerCaption}>
<Animated.Text
style={[styles.caption, { opacity: this.fadeAnimation }]}>
words words words
</Animated.Text>
</View>
<View style={styles.containerBottom}>
<GetStartedButton
onPress={() => this.props.navigation.navigate('SignUpEmail')}
/>
</View>
</View>
);
}
}
GetStartedButton.js:
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Animated } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
export default class GetStartedButton extends Component {
constructor(props) {
super(props);
this.fadeAnimation = new Animated.Value(0);
}
componentDidMount() {
Animated.timing(this.fadeAnimation, {
toValue: 1,
duration: 5000,
useNativeDriver: true,
}).start();
}
render() {
return (
<Animated.View
style={[styles.container, { opacity: this.fadeAnimation }]}>
<TouchableOpacity
onPress={() => {
this.props.onPress();
}}>
<LinearGradient
colors={['#DB004C', '#FC008E']}
style={styles.linearGradient}
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}>
<Text style={styles.text}>Get Started</Text>
</LinearGradient>
</TouchableOpacity>
</Animated.View>
);
}
}
這是工作Expo 小吃演示。
您已創建堆棧但未在 App.js 中呈現它。 相反,您渲染歡迎頁面直接將創建的堆棧添加到返回方法:
export default class App extends Component {
createHomeStack = () =>
<Stack.Navigator>
<Stack.Screen name="Welcome" component= {Welcome}/>
<Stack.Screen name="SignUpEmail" component= {SignUpEmail}/>
</Stack.Navigator>
render() {
return (
<View style={styles.welcomeScreen}>
{this.createHomeStack()}
</View>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.