zoukankan      html  css  js  c++  java

  • 【水滴石穿】FirstReactNativeProject

    这个是一个小demo，项目地址为https://github.com/prsioner/FirstReactNativeProject
    有注册，忘记密码还有登陆，应该是用到了react-navigation，让注册密码和忘记密码可以跳转到页面
    先看页面效果

    代码如下
    从根index.js中可以看到主要内容渲染自App组件

    //index.js
/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

    //app.js
/*
*说明：用户登录注册忘记密码等功能的页面跳转
* */

import React, {Component} from 'react';
import {Button, View, Text, Alert, Image, StyleSheet, TextInput,FlatList} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json
import loginComponentBack from './img/common_icon_arrow_back.png'
import weChatIcon from './img/common_share_logo_wechat.png'


class UserLoginComponent extends React.Component {
    /*constructor(props) {
        super(props);
        this.state = {account: '',password:''};
    }*/

    render() {

        return (
            // 尝试把`alignItems`改为`flex-start`看看
            // 尝试把`justifyContent`改为`flex-end`看看
            // 尝试把`flexDirection`改为`row`看看
            <View style={{
                flex: 1,
                flexDirection: 'column',
                //justifyContent: 'center',
                alignItems: 'stretch',
            }}>
                {/*返回键*/}
                <View >

                    <Image  source={loginComponentBack} style={styles.arrowback}/>

                </View>

                {/*登录和输入框---alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）*/}
                <View style={{marginTop:100,alignItems:'center'}}>

                    <Text style={styles.loginTextStyle}>登录</Text>
                    <TextInput
                        style={{height: 40}}
                        placeholder="请输入账号：1"
                        onChangeText={(account) => this.setState({account})}
                    />
                    <TextInput
                        style={{height: 40}}
                        placeholder="请输入密码：1"
                        onChangeText={(password) => this.setState({password})}
                    />

                </View>


                <Button
                    style={{marginTop:20,height: 70,paddingLeft:20,paddingRight:20,textColor:'write'}}
                    onPress={() => {

                        //todo 如何友好的判断用户输入
                       /* if((this.state.account== null||this.state.account=="" ||
                                this.state.password == null || this.state.password=="")){
                            Alert.alert("请输入账号或者密码")
                        }else {
                            if(this.state.account ==1 && this.state.password==1){
                                this.props.navigation.navigate('MoviesPage')
                            }else {
                                Alert.alert("请输入正确的账号或者密码")
                            }
                        }*/

                        if(this.state.account ==1 && this.state.password==1){this.props.navigation.navigate('MoviesPage');}

                    }}
                    title="登录"
                />
                {/*第三方登录*/}
                {/* 点击进入另一个页面 */}
                {/* this.props.navigation.navigate('RegisterAccount') */}
                <View style={{marginTop:20,flexDirection:'row',justifyContent:'space-between'}} >
                    <Button
                        style={styles.registerAccount}
                        onPress={() => {
                            this.props.navigation.navigate('RegisterAccount')
                        }}
                        title="注册账号"
                    />

                    <Button
                        style={styles.registerAccount}
                        onPress={() => {
                            this.props.navigation.navigate('ForgetPassword')
                        }}
                        title="忘记密码"
                    />

                </View>

                <View style={{marginTop:60,flexDirection:'column',alignItems:'center'}} >
                    <Text style={styles.registerAccount}>第三方登录</Text>

                    <Image source={weChatIcon} style={styles.weChatIconStyle}/>
                </View>


            </View>
        );
    }

    /**
     * 注册账号的点击事件
     */
    /*registerOnPress(){
        //Alert.alert("点击了注册账号")
        this.props.navigation.navigate('RegisterAccount')
    }
    forgetPassword(){
        this.props.navigation.navigate('ForgetPassword')
    }*/
}
// 这个页面，就是跳转到的页面居然可以跳转到其他页面
class RegisterAccount extends React.Component {
    static navigationOptions={
        title :'Register Account'
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>账号注册</Text>
            </View>
        );
    }
}
var  REQUEST_URL ="https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";


class MainMoviesPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loaded: false
        };
        // 在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向会变为空
        // 像下面这行代码一样，在constructor中使用bind是其中一种做法（还有一些其他做法，如使用箭头函数等）
        this.fetchData = this.fetchData.bind(this);
    }
    // componentDidMount是 React 组件的一个生命周期方法，它会在组件刚加载完成的时候调用一次，以后不会再被调用
    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then(responseData => {
                // 注意，这里使用了this关键字，为了保证this在调用时仍然指向当前组件，我们需要对其进行“绑定”操作
                this.setState({
                    data: this.state.data.concat(responseData.movies),
                    loaded: true
                });
            });
    }

    render() {
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <FlatList
                data={this.state.data}
                renderItem={this.renderMovie}
                style={styles.list}
                keyExtractor={item => item.id}
            />
        );
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>Loading movies...</Text>
            </View>
        );
    }

    renderMovie({ item }) {
        // { item }是一种“解构”写法，请阅读ES2015语法的相关文档
        // item也是FlatList中固定的参数名，请阅读FlatList的相关文档
        return (
            <View style={styles.container}>
                <Image
                    source={{ uri: item.posters.thumbnail }}
                    style={styles.thumbnail}
                />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.year}>{item.year}</Text>
                </View>
            </View>
        );
    }
}

/**
 * 实现一个计数器
 */
class ForgetPassword extends React.Component {
    
    static navigationOptions={
        title :'Forget Password'
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>忘记密码</Text>
            </View>
        );
    }
}

//这个里面是定义一些页面
const RootStack = createStackNavigator(
    {
        Home: UserLoginComponent,
        RegisterAccount: RegisterAccount,
        ForgetPassword:ForgetPassword,
        MoviesPage:MainMoviesPage
    },
    {
        initialRouteName: 'Home',
    }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

const styles  = StyleSheet.create({
    arrowback:{
        50,
        height:50
    },
    loginTextStyle:{
        color:'black',
        fontWeight: 'bold',
        fontSize: 30,

    },
    registerAccount:{
        color:'blue',
        fontSize:16,
    },
    weChatIconStyle:{
        marginTop:20,
        50,
        height:50
    },
    container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF"
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: "center"
    },
    year: {
        textAlign: "center"
    },
    thumbnail: {
         53,
        height: 81
    },
    list: {
        paddingTop: 20,
        backgroundColor: "#F5FCFF"
    }


});

    app.js里面写了很多东西，比如定义呃跳转的页面，还有那个方法，然后跳转的页面居然都写在一个页面里面，神奇
    这个叫做腐朽吧～
    　```.js
    //page/user/navigation_jump_demo.js
    /**

    import React from 'react';
    import { Button, View, Text } from 'react-native';
    import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json

    class HomeScreen extends React.Component {
    render() {
    return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    Home Screen
    <Button
    title="Go to Details"
    onPress={() => this.props.navigation.navigate('Details')}
    />

    );
    }
    }

    class DetailsScreen extends React.Component {
    render() {
    return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    Details Screen

    );
    }
    }

    const RootStack = createStackNavigator(
    {
    Home: HomeScreen,
    Details: DetailsScreen,
    },
    {
    initialRouteName: 'Home',
    }
    );

    const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
    render() {
    return ;
    }
    }

    ```js
//page/user/UserLoginComponent.js
/*
*说明：用户登录注册忘记密码等功能的页面跳转
* */

import React from 'react';
import {Button, View, Text, Alert, Image, StyleSheet, TextInput} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json
import loginComponentBack from './img/common_icon_arrow_back.png'
import weChatIcon from './img/common_share_logo_wechat.png'


class UserLoginComponent extends React.Component {
    /*constructor(props) {
        super(props);
        this.state = {account: '',password:''};
    }*/
    render() {
        return (
            // 尝试把`alignItems`改为`flex-start`看看
            // 尝试把`justifyContent`改为`flex-end`看看
            // 尝试把`flexDirection`改为`row`看看
            <View style={{
                flex: 1,
                flexDirection: 'column',
                //justifyContent: 'center',
                alignItems: 'stretch',
            }}>
                {/*返回键*/}
                <View >

                    <Image  source={loginComponentBack} style={styles.arrowback}/>

                </View>

                {/*登录和输入框---alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）*/}
                <View style={{marginTop:100,alignItems:'center'}}>

                    <Text style={styles.loginTextStyle}>登录</Text>
                    <TextInput
                        style={{height: 40}}
                        placeholder="请输入账号"
                        onChangeText={(account) => this.setState({account})}
                    />
                    <TextInput
                        style={{height: 40}}
                        placeholder="请输入密码"
                        onChangeText={(password) => this.setState({password})}
                    />

                </View>


                <Button
                    style={{marginTop:20,height: 70,paddingLeft:20,paddingRight:20,textColor:'write'}}
                    onPress={() => {
                        Alert.alert((this.state.account==null||this.state.account=="" ||
                            this.state.password == null || this.state.password=="")? "请输入账号或者密码":"账号:"+this.state.account+'
'+"密码："+this.state.password);

                    }}
                    title="登录"
                />
                {/*第三方登录*/}
                <View style={{marginTop:20,flexDirection:'row',justifyContent:'space-between'}} >
                    <Button
                        style={styles.registerAccount}
                        onPress={() => {
                            this.props.navigation.navigate('RegisterAccount')
                        }}
                        title="注册账号"
                    />

                    <Button
                        style={styles.registerAccount}
                        onPress={() => {
                            this.props.navigation.navigate('ForgetPassword')
                        }}
                        title="忘记密码"
                    />

                </View>

                <View style={{marginTop:60,flexDirection:'column',alignItems:'center'}} >
                    <Text style={styles.registerAccount}>第三方登录</Text>

                    <Image source={weChatIcon} style={styles.weChatIconStyle}/>
                </View>


            </View>
        );
    }

    /**
     * 注册账号的点击事件
     */
    /*registerOnPress(){
        //Alert.alert("点击了注册账号")
        this.props.navigation.navigate('RegisterAccount')
    }
    forgetPassword(){
        this.props.navigation.navigate('ForgetPassword')
    }*/
}

class RegisterAccount extends React.Component {
    static navigationOptions={
        title :'Register Account'
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>账号注册</Text>
            </View>
        );
    }
}

class ForgetPassword extends React.Component{
    static navigationOptions={
        title :'Forget Password'
    };

    render(){
        return (
            <View>
                <Text>忘记密码页面</Text>
            </View>
        )
    }
}

const RootStack = createStackNavigator(
    {
        Home: UserLoginComponent,
        RegisterAccount: RegisterAccount,
        ForgetPassword:ForgetPassword
    },
    {
        initialRouteName: 'Home',
    }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

const styles  = StyleSheet.create({
    arrowback:{
        50,
        height:50
    },
    loginTextStyle:{
        color:'black',
        fontWeight: 'bold',
        fontSize: 30,

    },
    registerAccount:{
        color:'blue',
        fontSize:16,
    },
    weChatIconStyle:{
        marginTop:20,
        50,
        height:50
    }

});

    这个项目不行啊～～～
  • 相关阅读:
    kb,mb
    搜狗浏览器“Alt+Z”（重新打开刚关闭的页面）失效的解决方案——使用“hkexplr”查看占用的快捷键
    在 Windows server 中备份数据、分区、磁盘，以及硬盘对拷——傲梅轻松备份2.1.0汉化破解技术员版
    使用了阵列卡的服务器，在Windows系统内看到硬盘的品牌、型号信息——aida64
    利用“VeraCrypt”创建加密卷（文件夹加密，较高强度）
    Windows下多个硬盘显示为一个分区的方案
    win10企业版400年密钥
    Easy2Boot——可制作多包含多个原版系统（.iso）的工具
    第三方资源管理器——XYplorer（可自定义文件夹颜色）
    Windows10专业版（版本号：21H1）安装后的设置
  • 原文地址：https://www.cnblogs.com/smart-girl/p/10881016.html
Copyright © 2011-2022 走看看