React-Native基础语法学习--------one

写在前面的话：本篇文章适用于正在学习react-native的小白，本篇文章是建立在react-native环境已经搭建好的情况下，在新建的项目中去写的。（如果环境还没有配好的，可以去上上一篇文章，然后再进一步学习语法）

资料来源：b站react-native视频

今日学习知识：react-native中样式的写法，rn内置组件

中文文档：TextInput · React Native 中文网

part1：react-native中样式的写法

react-native中样式的写法和css有相似的地方，也有很多不同的地方，这就需要我们去了解学习。

不同点：

1. 没有继承性（Text组件上存在继承性）
2. 样式名采用小驼峰命名法（eg：fontSize）
3. 所有的尺寸无单位（width：100）
4. 有些特殊的样式名

声明样式的方式：

1、直接声明：通过style直接声明

<组件 style={{样式}} />  或 <组件 style={{  [样式1] , [样式2] ,  }}

2、在style中调用

引入：import { StyleSheet,  Text, View} from 'react-native'

声明：

const styles = StyleSheet.create({

  containers:{

    height:230,

    borderWidth:1,

    borderColor:"#ccc",

    flexDirection:"row"

  },

});

使用：

 <View style={[styles.containers]}>

          <Text >测试文字</Text>

        </View>

（这里只是初步的介绍下，如果是小白，不太明白，可以看后面的例子）

part2：react-native中的组件

1、Flexbox 弹性布局

在css当中也有弹性布局，但是rc中的弹性布局和css中的小有区别

 flexDirection:"column"主轴方向 默认是这样的，也就是说不写的话默认是这样排列

 flexDirection:"row"的效果如下

全部代码如下：

项目初始化之后：修改App.js里面的内容，如下，引入组件，方便测试

创建src，目录如下，然后将对应的文件引入过去

 去src/component/test下写，代码如下，可以去尝试下，自己写写，熟悉下

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

export default class indx extends Component {
  render() {
    return (
      <View>
        <Text style={styles.h2}> 主轴方向 </Text>
        <View style={[styles.containers]}>
          <Text style={[styles.item]}>第一个盒子</Text>
          <Text style={[styles.item]}>第二个盒子</Text>
          <Text style={[styles.item]}>第三个盒子</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  containers:{
    height:230,
    borderWidth:1,
    borderColor:"#ccc",
    flexDirection:"row"
  },
  h2:{
    fontSize:22,
    marginBottom:10,
  },
  item:{
    backgroundColor:"skyblue",
    padding:10,
    textAlign:"center",
    borderWidth:1,
    borderColor:"blue",
    height:100,
    flex:1
  }



});

 2、响应式布局

创建一个文件夹，src/component/responsive/index.js

在里面写接下来的代码，同时，去appjs里面换下引入的路径，以确保是这个页面

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

export default class index extends Component {
  render() {
    return (
      <View  style={[styles.containers]}>
        <View style={[styles.item]}>
            <Text style={[styles.h3]}>扫一扫</Text>
        </View>
        <View style={[styles.item]}>
            <Text style={[styles.h3]}>付款码</Text>
        </View>
        <View style={[styles.item]}>
            <Text style={[styles.h3]}>卡包</Text>
        </View>
        <View style={[styles.item]}>
            <Text style={[styles.h3]}>出行</Text>
        </View>
      </View>
    )
  }
}


const styles = StyleSheet.create({
    containers:{
        flexDirection:"row",
        backgroundColor:"#00aeec",
        height:40,
    },
    item:{
        borderWidth:1,
        borderColor:"#ccc",
        width:Dimensions.get("window").width/4,
      
    },
    h3:{
        fontSize:16,
        textAlign:"center",
        lineHeight:40
    }


});

 效果图如下：

这里通过Dimensions.get("window").width根据浏览器窗口获取实时的宽度，从而实现响应式

3、Buttton

这个组件比较简单   代码如下

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

export default class index extends Component {
    danger = () => {
        Alert.alert(
            "警告标题",
            "警告内容",
            [
                {
                    text: "取消",
                    onPress: () => console.log("cancel"),
                    style: "cancel"
                },
                {
                    text: "确认",
                    onPress: () => console.log("confirm"),
                    style: "confirm"
                },
            ]
        )

    }
    refresh = () => {
        Alert.alert(
            "更新提示",
            "发现新版本，是否现在更新",
            [
                {
                    text: "取消",
                    onPress: () => console.log("cancel"),
                    style: "cancel"
                },
                {
                    text: "确认",
                    onPress: () => console.log("OK"),
                    style: "confirm"
                },
                {
                    text: "稍后再试",
                    onPress: () => console.log("later try"),
                    style: "confirm"
                },
            ]
        )

    }
    render() {
        return (
            <View>
                <View>
                    <Button title='普通按钮' onPress={() => { alert("我是普通按钮") }} />
                    <Button title='警告按钮' color={"red"} onPress={this.danger } />
                    <Button title='版本更新' color={"tomato"} onPress={this.refresh } />
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({

})

效果图如下：

 根据代码，可以去练习一下按钮的用法，不同于react和html当中，按钮中间的文字是写在title里面

4、Switch和StatuBar

  <StatusBar hidden={false} backgroundColor="blue" barStyle={"light-content"}></StatusBar>

hidden控制最上面的那个导航出现与否，backgroundColor是上面的背景颜色

5、Image   TextInput

首先，图片的引入官方讲了三种，一种本地，一种线上，还有一种是base解析的。

（注意：每个图片都要给宽高）

本地：这里面这个"../../utils/1.png"是相对路径

 <Image

style={styles.pic2}

source={require("../../utils/1.png")}

></Image>

线上：

<Image

style={styles.pic}

 source={{

uri: "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18e85b7b9d4c4ca7885c10b9da41eda4~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?"

 }} ></Image>

TextInput是输入框

加上secureTextEntry={true}属性类似于密码框

加上 multiline={true}    numberOfLines={5}类似于多行文本

总体代码如下：

import { Text, View, StyleSheet, ActivityIndicator, Image, TextInput, Button, TouchableHighlight, TouchableOpacity } from 'react-native'
import React, { Component } from 'react'
import { Touchable } from 'react-native';

export default class index extends Component {
    constructor (){
        super();
        this.state = {
            username:"",
            pwd:"",
            textarea:""
        }
        
    }
    render() {
        return (
            <View>
                {/* 加载组件 */}
                {/* <ActivityIndicator color="blue" size="large"></ActivityIndicator> */}
                <Image
                    style={styles.pic}
                    source={{
                        uri: "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18e85b7b9d4c4ca7885c10b9da41eda4~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?"
                    }} ></Image>
                    <Image 
                     style={styles.pic2}
                     source={require("../../utils/1.png")}
                    ></Image>

                    <TextInput style={styles.input} placeholder='请输入用户名'
                     value={this.state.username} 
                     onChangeText={(val)=>{this.setState({username:val})}}></TextInput>

                    <TextInput style={styles.input} placeholder='请输入密码'
                     value={this.state.pwd} 
                     secureTextEntry={true}
                     onChangeText={(value)=>{this.setState({pwd:value})}}></TextInput>

                    <TextInput style={styles.textarea} placeholder='请输入自我介绍'
                     value={this.state.textarea} 
                    multiline={true}
                    numberOfLines={5}
                     onChangeText={(value)=>{this.setState({textarea:value})}}></TextInput>

                     <Button title='登录' onPress={()=>{alert(this.state.username)}}></Button>

            </View >
        )
    }
}
const styles = StyleSheet.create({
    pic: {
        width: 100,
        height: 100
    },
    pic2: {
        width: 300,
        height: 300
    },
    input:{
        width:260,
        height:45,
        borderWidth:1,
        margin:20,
        fontSize:16,
    },
    textarea:{
        borderWidth:1
    }


})

效果图：

总结：本文内容比较基础，只是看看似乎没什么用，重要的还是得自己敲代码！！