博客

接上文：记录一下其他页面。homescreen页面主要就是练习一下，创建文件还有布局，组件等。

import { Button, StyleSheet, View,Text, TextInput, SafeAreaView, Alert } from "react-native"
import { color } from "react-native-reanimated"
import React from 'react';

export default class HomeScreen extends React.Component{
    //构造函数
    constructor(props){
    super(props);
    //初始化数据
    this.state={
        username:'',
        pwdFirst:'',
        pwdSecond:'',
        isDisable:true,

    }
    }

    //方法 提交
    Submit = () => {
    const   { username, pwdFirst,pwdSecond} = this.state;
    if (!username || !username.trim()) {
      Alert.alert('请输入用户名');
      return;
    }

    if (!pwdFirst || !pwdFirst.trim()) {
      Alert.alert('请输入密码');
      return;
    } 
    if (!pwdSecond || !pwdSecond.trim()) {
      Alert.alert('请输入密码');
      return;
    }
    if(!(pwdFirst==pwdSecond)){
       Alert.alert('请确认输入密码是否一致');
      return; 
    }
    this.props. navigation.navigate('Details')
  
}

   
    //渲染
    render(){
    
        return(
            
            
      <View  style={styles.outSideStyle}>
          
             <TextInput style={styles.inputStyle } placeholder='请输入用户名'
             onChangeText={(username) => this.setState({username})}
             value={this.state.username}
             >
             </TextInput>
             <TextInput style={styles.inputStyle } placeholder='请输入密码' secureTextEntry={true}
             onChangeText={(pwdFirst) => this.setState({pwdFirst})}
              value={this.state.pwdFirst} >
             </TextInput>
             <TextInput style={styles.inputStyle } placeholder='请输入密码' secureTextEntry={true}
             onChangeText={(pwdSecond) => this.setState({pwdSecond})}
             value={this.state.pwdSecond} 
            >
             </TextInput>
           <View style={styles.btnStyle} >
               <Button   title="提交" color={'red'} 
                onPress={this.Submit}></Button>
               </View> 
        
         {/* <Button
            style={styles.landButton}
        
            titleStyle={{ color: 'white', fontSize: 16 }}
            title={'提交'}
            onPress={this.Submit}
          /> */}
            </View>
            
           
        )
           
    }
}



const styles=StyleSheet.create({
    outSideStyle:{
        flex:0.5,
        backgroundColor:'white'
    },
    topTitleStyle:{
        fontSize:16,
        color:'black',
        backgroundColor:'white',
        textAlignVertical:'center',
        textAlign:'center',
        height:40,
        
        
    },
    inputStyle:{
       marginTop:40,
       backgroundColor:'white',
       flex:2,
       color:'black',
       paddingLeft:10,
       borderWidth:1,
       marginLeft:10,
       marginRight:10,
       marginBottom:20,
       
    },

    btnStyle:{
       margin: 10,
       borderRadius: 5,
       borderColor: 'green',
       
    },

    landButton: {
    marginTop: 30,
    marginBottom: 50,
    backgroundColor: 'red',
    height: 80,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10
  },
    

})

此处有一个需要注意的地方就是在设置布尔类型的值得时候，需要加一对儿大括号包裹一下，不然就会被读取为字符串true 或者false

下图是关于其他页面的跳转与图片控件的使用。

完整页面代码如下所示：

import { Button, StyleSheet, View ,Text, ImageBackground} from "react-native"
import { color } from "react-native-reanimated"
import React from 'react';
import { TextInput } from "react-native-gesture-handler";

export default class DetailsScreen extends React.Component{
    render(){
        return(
            <ImageBackground 
            source={{
    uri: "https://facebook.github.io/react/logo-og.png",
    method: "POST",
    headers: {
      Pragma: "no-cache",
    },
    body: "Your Body goes here",
  }}
  style={{width:480,height:800}}>
<View style={[styles.outSideStyle,{flexDirection: "column"}] }>
            <Text style={styles.topTitleStyle}>注册</Text>
             <TextInput style={styles.inputStyle } placeholder='请输入用户名'>
             </TextInput>
             <TextInput style={styles.inputStyle } placeholder='请输入密码' secureTextEntry={true} >
             </TextInput>
             <TextInput style={styles.inputStyle } placeholder='请输入密码' secureTextEntry={true}>
             </TextInput>
             <Button title="Go to test for tab screen" onPress={() => this.props.navigation.navigate('Tab')}></Button>
            
            </View>
            </ImageBackground>
            

            
        )
           
    }
}

const styles=StyleSheet.create({
    outSideStyle:{
        backgroundColor:'white',
        flex:0.7,

    },
    topTitleStyle:{
        fontSize:16,
        color:'white',
        backgroundColor:'blue',
        textAlignVertical:'center',
        textAlign:'center',
        flex:1

    },
    inputStyle:{
       marginTop:40,
       backgroundColor:'white',
       flex:2,
       color:'black',
       paddingLeft:10,
       borderWidth:1,
       borderColor:'red',
       marginLeft:10,
       marginRight:10,
       
    },
    

})