React native 将数据从一页传递到另一页
我想通过电子邮件_id，一页到另一页，但它显示错误 我使用导航，跳转到另一个页面并发送数据 我的第一个文件名为-Onboarding.jsReact native 将数据从一页传递到另一页,react-native,navigation,React Native,Navigation,我想通过电子邮件_id，一页到另一页，但它显示错误 我使用导航，跳转到另一个页面并发送数据 我的第一个文件名为-Onboarding.js import React, { Component } from 'react'; import { StyleSheet, ImageBackground, Dimensions, StatusBar, KeyboardAvoidingView, Image, TextInput, View, Alert } from "react
import React, { Component } from 'react';
import {
StyleSheet,
ImageBackground,
Dimensions,
StatusBar,
KeyboardAvoidingView,
Image, TextInput, View, Alert
} from "react-native";
import Toast, {DURATION} from 'react-native-easy-toast'
import { Block, Checkbox, Text, theme } from "galio-framework";
import { StackNavigator } from 'react-navigation';
import { Button, Icon, Input } from "../components";
import { Images, argonTheme } from "../constants";
const { width, height } = Dimensions.get("screen");
class Register extends React.Component {
constructor(props) {
super(props)
this.state = {
UserName: '',
UserEmail: '',
UserPassword: ''
}
}
UserLoginFunction = () =>{
const { UserName } = this.state;
const { UserEmail } = this.state ;
const { UserPassword } = this.state ;
fetch('http://demo.weybee.in/react/User_Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: UserName,
email: UserEmail,
password: UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson === 'Data Matched')
{
//Then open Profile activity and send user email to profile activity.
this.refs.toast.show('Login successful', 500, () => {
const { navigation } = this.props;
navigation.navigate("Profile",{Email: UserEmail});
});
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<Block flex middle>
<StatusBar hidden />
<ImageBackground
source={Images.Onboarding}
style={{ width, height, zIndex: 1 }}
>
<Block flex middle>
<Block style={styles.registerContainer}>
<Block flex={0.25} middle style={styles.socialConnect}>
<Image
style={{width: 90, height: 90, marginTop:13}}
source={require('./fitness.png')} />
<Block row style={{ marginTop: theme.SIZES.BASE }}>
</Block>
</Block>
<Block flex>
<Block flex={0.17} middle>
<Text color="#656f7a" size={20}>
Fight for fitness
</Text>
</Block>
<Block flex center>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior="padding"
enabled
>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
style={{borderRadius:50, borderWidth:5}}
onChangeText={UserName => this.setState({UserName})}
borderless
placeholder="Name"
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="hat-3"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
style={{borderRadius:50, borderWidth:5}}
onChangeText={UserEmail => this.setState({UserEmail})}
borderless
placeholder="Email"
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="ic_mail_24px"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8}>
<Input
style={{borderRadius:50, borderWidth:5}}
onChangeText={UserPassword => this.setState({UserPassword})}
password
borderless
placeholder="Password"
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="padlock-unlocked"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block middle>
<Button color="primary" style={styles.createButton} onPress={this.UserLoginFunction}>
<Text bold size={14} color={argonTheme.COLORS.WHITE}>
Log In
</Text>
</Button>
<Toast ref="toast"
style={{backgroundColor:'#131313'}}
textStyle={{color:'white',fontWeight: 'bold'}}
position='top'/>
</Block>
</KeyboardAvoidingView>
</Block>
</Block>
</Block>
</Block>
</ImageBackground>
</Block>
);
}
}
import React，{Component}来自'React'；
进口{
样式表，
图像背景，
尺寸，
状态栏，
键盘避免了gView，
图像、文本输入、视图、警报
}从“反应本族语”；
从“react native easy Toast”导入Toast，{DURATION}
从“galio框架”导入{块、复选框、文本、主题}；
从“react navigation”导入{StackNavigator}；
从“./组件”导入{按钮、图标、输入}；
从“./constants”导入{Images，argonTheme}；
const{width，height}=Dimensions.get（“屏幕”）；
类寄存器扩展了React.Component{
构造器（道具）{
超级（道具）
此.state={
用户名：“”，
用户电子邮件：“”，
用户密码：“”
}
}
UserLoginFunction=（）=>{
const{UserName}=this.state；
const{UserEmail}=this.state；
const{UserPassword}=this.state；
取（'http://demo.weybee.in/react/User_Login.php', {
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
用户名：用户名，
电子邮件：UserEmail，
密码：UserPassword
})
}).then（（response）=>response.json（））
.然后（（responseJson）=>{
//如果服务器响应消息与数据匹配
if（responseJson===‘数据匹配’）
{
//然后打开配置文件活动并向配置文件活动发送用户电子邮件。
this.refs.toast.show（'Login successful'，500，（）=>{
const{navigation}=this.props；
导航（“配置文件”{Email:UserEmail}）；
});
}
否则{
警惕，警惕（responseJson）；
}
}).catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
返回(
为健身而战
this.setState（{UserName}）}
无边界
占位符=“名称”
图标内容={
}
/>
this.setState（{UserEmail}）}
无边界
占位符=“电子邮件”
图标内容={
}
/>
this.setState（{UserPassword}）}
密码
无边界
占位符=“密码”
图标内容={
}
/>
登录
);
}
}
import React from "react";
import {
StyleSheet,
Dimensions,
ScrollView,
Image,
ImageBackground,
Platform
} from "react-native";
import { Block, Text, theme } from "galio-framework";
import { StackNavigator } from 'react-navigation';
import { Button, Input, Icon } from "../components";
import { Images, argonTheme } from "../constants";
import { HeaderHeight } from "../constants/utils";
const { width, height } = Dimensions.get("screen");
const thumbMeasure = (width - 48 - 32) / 3;
class Profile extends React.Component {
render() {
const {goBack} = this.props.navigation;
return (
<Block flex style={styles.profile}>
<Block flex>
<ImageBackground
source={Images.ProfileBackground}
style={styles.profileContainer}
imageStyle={styles.profileBackground}
>
<ScrollView
showsVerticalScrollIndicator={false}
style={{ width, marginTop: '25%' }}
>
<Block flex style={styles.profileCard}>
<Block middle style={styles.avatarContainer}>
<Image
source={{ uri: Images.ProfilePicture }}
style={styles.avatar}
/>
</Block>
<Block flex>
<Block middle style={styles.nameInfo}>
<Text bold size={28} color="#32325D">
{ this.props.navigation.state.params.Email }
</Text>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Email"
value = { this.props.navigation.state.params.Email }
style={{marginTop:20, borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Mobile Number"
style={{borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Gender"
style={{borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
</Block>
<Block middle>
<Button color="primary" style={styles.createButton} onPress={this.UserLoginFunction}>
<Text bold size={14} color={argonTheme.COLORS.WHITE}>
Edit Info
</Text>
</Button>
</Block>
</Block>
</Block>
</ScrollView>
</ImageBackground>
</Block>
</Block>
);
}
}
从“React”导入React；
进口{
样式表，
尺寸，
滚动视图，
形象,，
图像背景，
站台
}从“反应本族语”；
从“galio框架”导入{块、文本、主题}；
从“react navigation”导入{StackNavigator}；
从“./组件”导入{按钮、输入、图标}；
从“./constants”导入{Images，argonTheme}；
从“./constants/utils”导入{HeaderHeight}；
const{width，height}=Dimensions.get（“屏幕”）；
常量thumbMeasure=（宽度-48-32）/3；
类概要文件扩展了React.Component{
render（）{
const{goBack}=this.props.navigation；
返回(
{this.props.navigation.state.params.Email}
编辑信息
);
}
}
import React from "react";
import { Easing, Animated } from "react-native";
import {
createStackNavigator,
createDrawerNavigator,
createAppContainer
} from "react-navigation";
import { Block } from "galio-framework";
// screens
import Home from "../screens/Home";
import Onboarding from "../screens/Onboarding";
import Pro from "../screens/Pro";
import Profile from "../screens/Profile";
import Register from "../screens/Register";
import Elements from "../screens/Elements";
import Articles from "../screens/Articles";
// drawer
import Menu from "./Menu";
import DrawerItem from "../components/DrawerItem";
// header for screens
import Header from "../components/Header";
const transitionConfig = (transitionProps, prevTransitionProps) => ({
transitionSpec: {
duration: 400,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const thisSceneIndex = scene.index;
const width = layout.initWidth;
const scale = position.interpolate({
inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
outputRange: [4, 1, 1]
});
const opacity = position.interpolate({
inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
outputRange: [0, 1, 1]
});
const translateX = position.interpolate({
inputRange: [thisSceneIndex - 1, thisSceneIndex],
outputRange: [width, 0]
});
const scaleWithOpacity = { opacity };
const screenName = "Search";
if (
screenName === transitionProps.scene.route.routeName ||
(prevTransitionProps &&
screenName === prevTransitionProps.scene.route.routeName)
) {
return scaleWithOpacity;
}
return { transform: [{ translateX }] };
}
});
const ElementsStack = createStackNavigator({
Elements: {
screen: Elements,
navigationOptions: ({ navigation }) => ({
header: <Header title="Elements" navigation={navigation} />
})
}
},{
cardStyle: {
backgroundColor: "#F8F9FE"
},
transitionConfig
});
const ArticlesStack = createStackNavigator({
Articles: {
screen: Articles,
navigationOptions: ({ navigation }) => ({
header: <Header title="Articles" navigation={navigation} />
})
}
},{
cardStyle: {
backgroundColor: "#F8F9FE"
},
transitionConfig
});
const ProfileStack = createStackNavigator(
{
Profile: {
screen: Profile,
navigationOptions: ({ navigation }) => ({
header: (
<Header white transparent title="Profile" iconColor={'#FFF'} navigation={navigation} />
),
headerTransparent: true
})
}
},
{
cardStyle: { backgroundColor: "#FFFFFF" },
transitionConfig
}
);
const HomeStack = createStackNavigator(
{
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
header: <Header search options title="Home" navigation={navigation} />
})
},
Pro: {
screen: Pro,
navigationOptions: ({ navigation }) => ({
header: (
<Header left={<Block />} white transparent title="" navigation={navigation} />
),
headerTransparent: true
})
}
},
{
cardStyle: {
backgroundColor: "#F8F9FE"
},
transitionConfig
}
);
// divideru se baga ca si cum ar fi un ecrna dar nu-i nimic duh
const AppStack = createDrawerNavigator(
{
Onboarding: {
screen: Onboarding,
navigationOptions: {
drawerLabel: () => {}
}
},
Home: {
screen: HomeStack,
navigationOptions: navOpt => ({
drawerLabel: ({ focused }) => (
<DrawerItem focused={focused} title="Home" />
)
})
},
Profile: {
screen: ProfileStack,
navigationOptions: navOpt => ({
drawerLabel: ({ focused }) => (
<DrawerItem focused={focused} screen="Profile" title="Profile" />
)
})
},
Account: {
screen: Register,
navigationOptions: navOpt => ({
drawerLabel: ({ focused }) => (
<DrawerItem focused={focused} screen="Register" title="Account" />
)
})
},
Elements: {
screen: ElementsStack,
navigationOptions: navOpt => ({
drawerLabel: ({ focused }) => (
<DrawerItem focused={focused} screen="Elements" title="Elements" />
)
})
},
Articles: {
screen: ArticlesStack,
navigationOptions: navOpt => ({
drawerLabel: ({ focused }) => (
<DrawerItem focused={focused} screen="Articles" title="Articles" />
)
})
}
},
Menu
);
const AppContainer = createAppContainer(AppStack);
export default AppContainer;
从“React”导入React；
从“react native”导入{Easing，Animated}；
进口{
createStackNavigator，
createDrawerNavigator，
createAppContainer
}从“反应导航”；
从“galio框架”导入{Block}；
//屏风
从“./屏幕/主页”导入主页；
从“./屏幕/入职”导入入职；
从“./screens/Pro”导入Pro；
从“./屏幕/配置文件”导入配置文件；
从“./屏幕/寄存器”导入寄存器；
从“./屏幕/元素”导入元素；
从“./屏幕/文章”导入文章；
//抽屉
从“/Menu”导入菜单；
从“./components/DrawerItem”导入DrawerItem；
//屏幕标题
从“./组件/标题”导入标题；
常量transitionConfig=（transitionProps，prevTransitionProps）=>({
过渡规格：{
持续时间：400，
放松：放松.out（放松.poly（4）），
计时：动画。计时
},
this.props.navigation.state.params.Email
this.props.navigation.getParam("Email")