react-native 实际项目解析-样式控制和动画

通用样式定制

import {Dimensions} from "react-native";
const {width,height} = Dimensions.get('window');

export const itemColor = '#0195ff';    // 主题颜色
export const mainPadding = 10; // 最外层容器边距
export const midWidth = width - mainPadding*2; // 除去边距后主宽度
export const midHeight = height - mainPadding * 2; // 除去边距后主高度
export const borderColorGray = '#f1f1f1';  // 灰色边框颜色
export const COMMON_STYLES = {
    ITEM_COLOR: itemColor,
    WIDTH: width,
    HEIGHT: height,
    MAIN_PADDING: mainPadding,
    MID_WIDTH: midWidth,
    MID_HEIGHT: midHeight,
    BORDER_COLOR_GRAY: borderColorGray,
    NAV_HEIGHT: 50
}

这里用Dimensions获取屏幕的宽高,然后定义主题颜色/ 边框颜色等。

flex

react-native主要布局是用flex,这个布局方式之前写过文档。全回顾扫盲css之flex布局一

关联多个style

style={[styles.lanListStyle, {transform:[{translateY: this.state.lanListShow}]}。在rn中,这些都是对象和属性。

动画制作 Animated

Animated是rn的模块。

  • 1.设置state,初始值写好。
  • 2.用animated标签嵌套,并设置值。
  • 3.函数处理,主要是通过timing方法。还可以进行同时进行/顺序进行等。
    this.state = {
        lanListShow: new Animated.Value(0),  // 语言列表动画初始值
    };


   <\Animated.View style={[styles.lanListStyle, {
         transform:[{translateY: this.state.lanListShow}]
    }]}
    >
        <\View  style={[styles.lanItem, styles.lanTitle]}>
            <\Text   style={[styles.lanText, styles.lanTextTitle]}>
                {I18n.t('message.language')}
            <\/Text>
        <\/View>
    <\/Animated.View>
/*******************
 * 动画处理
 */
// 打开语言列表
animateOpenLanList() {
    this.setState({
        showLanModal: true,     // loading是否显示
    });
    Animated.timing(
        this.state.lanListShow,
        {   // 同时开始旋转
            toValue: -250,
        }
    ).start()
}
// 关闭语言列表
animateCloseLanList() {
    Animated.timing(
        this.state.lanListShow,
        {   // 同时开始旋转
            toValue: 0,
        }
    ).start(()=>{
        this.setState({
            showLanModal: false,     // loading是否显示
        });
    })
}

随机浏览