React native 组件ScrollView和Alert警告框 的简单使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

一、ScrollView

常用属性

• horizontal={true} 水平排列 （如果不写默认的是竖向）
• showsHorizontalScrollIndicator 不显示横向滚动条（用小数点代替）
• pagingEnabled={true} 滚动条倍数滚动（类似与滑动一页）

这是最常用的三个，当然有很多属性 点击参考官网

举例代码如下：

import React, { Component } from 'react'
import { View,ScrollView,TextInput,Image,Text,StyleSheet,TouchableOpacity,Dimensions } from 'react-native'

export default class App5 extends Component {
  render() {
    return (
      <View >
          {/* showsHorizontalScrollIndicator  不显示横向滚动条（用小数点代替）
              horizontal={true} 水平排列
              pagingEnabled={true} 滚动条倍数滚动（类似与滑动一页）
          */}
          <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} pagingEnabled={true}>
          <View style={styles.box1}></View>
          <View style={styles.box2}></View>
          </ScrollView>
      </View>
    )
  }
}
const styles=StyleSheet.create({
    box1:{
        width:360,
        height:150,
        backgroundColor:"#ccc"
    },
    box2:{
        width:360,
        height:150,
        backgroundColor:"pink"
    }
})

二、Alert

启动一个提示对话框，包含对应的标题和信息。

你还可以指定一系列的按钮，点击对应的按钮会调用对应的 onPress 回调并且关闭提示框。默认情况下，对话框会仅有一个'确定'按钮。

在 Android 上最多能指定三个按钮，这三个按钮分别具有“中间态”、“消极态”和“积极态”的概念

• 效果图

• 点击第一个

• 点击第二个

• 点击第三个

代码如下：

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

export default class Nav extends Component {
  onClicktwo=()=>{
    Alert.alert(
      "标题",
      "内容",
      [
        {
          text:"取消",
          onPress:()=>console.log('cancle'),
          style:'cancel'
        },
        {
          text:"确定",
          onPress:()=>console.log('ok'),
          style:'default'
        }
      ]
    )
  }
  onClickthree=()=>{
    Alert.alert(
      "标题",
      "内容",
      [
        {
          text:"稍后",
          onPress:()=>console.log('ok'),
          style:'default'
        },
        {
          text:"取消",
          onPress:()=>console.log('cancle'),
          style:'cancel'
        },
        {
          text:"确定",
          onPress:()=>console.log('shou'),
          style:'default'
        }
      ]
    )
  }
  render() {
    return (
      <View style={[styles.container]}>
        <Button
          title='一个按钮'
          onPress={()=>{
            alert('按钮')
          }}
          color={"pink"}
        />
        
        <Button
          title='二个按钮'
          onPress={
           this.onClicktwo
          }
          color={"red"}
        />
        
        <Button
          title='三个按钮'
          onPress={
           this.onClickthree
          }
          color={"green"}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    justifyContent:"space-around",
    alignItems:"center",
  }
})