如果想要學(xué)習(xí)react-native的動(dòng)畫效果冰肴，這個(gè)組件是值得好好看看。
條件：在市場(chǎng)熙尉，商店搜索下載安裝 f8 app ,還要有一個(gè)fb的賬號(hào),否則在手機(jī)端看不到這個(gè)效果。
在f8app中狀態(tài)都是由redux來控制的圈膏，所以在看這個(gè)代碼的時(shí)候要有一個(gè)流程知道數(shù)據(jù)去了哪里慎皱，因?yàn)榇a不在一個(gè)文件中。f8app的redux使用比較靈活天揖，沒有標(biāo)準(zhǔn)的container文件夾夺欲，UI組件和redux的連接都是在需要狀態(tài)的組件中直接使用connect方法來注入需要的狀態(tài)和方法名。如果在組件中看到connect函數(shù)感到很困惑今膊，可以再返回去看看redux文檔關(guān)于connect的內(nèi)容些阅，注意里面對(duì)state注入的描述。
這個(gè)組件的數(shù)據(jù)流程是：
AddToSeheduleButton.js-->f8sessionDetail.js-->redux(action->reducer->store->)-->connect(mapStateToProps)-->AddToSeheduleButton 在中間的redux發(fā)生了state的翻轉(zhuǎn)斑唬，代碼據(jù)此來改變按鈕的顏色,文字的變化
剩下的問題就是組件自身的動(dòng)畫效果的變化市埋。

如果是對(duì)redux不太熟，其實(shí)可以在onPress的函數(shù)中直接使用setState來改變一個(gè)狀態(tài)標(biāo)記位就可以了恕刘。這樣這個(gè)組件我們就可以直接拿來研究缤谎，不用管redux的處理過程.但是最好要掌握redux。

button-playground.gif

點(diǎn)擊添加之前的樣式

S61110-102627.jpg

點(diǎn)擊添加之后的樣式

S61110-102638.jpg

首先放上代碼褐着。

  //f8app/js/tabs/schedule/AddToScheduleButton.js

  use strict';
var Image = require('Image');
var LinearGradient = require('react-native-linear-gradient');
var React = require('React');
var StyleSheet = require('StyleSheet');
var { Text } = require('F8Text');
var TouchableOpacity = require('TouchableOpacity');
var View = require('View');
var Animated = require('Animated');

type Props = {
  isAdded: boolean;
  onPress: () => void;
  addedImageSource?: number;
  style: any;
};

const SAVED_LABEL = 'Saved to your schedule';
const ADD_LABEL = 'Add to my schedule';

class AddToScheduleButton extends React.Component {
  constructor(props: Props) {
    super(props);
    this.state = {
      anim: new Animated.Value(props.isAdded ? 1 : 0),
    };
  }

  render() {
    const colors = this.props.isAdded ? ['#4DC7A4', '#66D37A'] : ['#6A6AD5', '#6F86D9'];

    const addOpacity = {
      opacity: this.state.anim.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0],
      }),
      transform: [{
        translateY: this.state.anim.interpolate({
          inputRange: [0, 1],  //y軸的變化
          outputRange: [0, 40],//映射的變化
        }),
      }],
    };

    const addOpacityImage = {
      opacity: this.state.anim.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0],
      }),
      transform: [{
        translateY: this.state.anim.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 80],
        }),
      }],
    };

    const addedOpacity = {
      opacity: this.state.anim.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }),
      transform: [{
        translateY: this.state.anim.interpolate({
          inputRange: [0, 1],
          outputRange: [-40, 0],
        }),
      }],
    };

    const addedOpacityImage = {
      opacity: this.state.anim.interpolate({
        inputRange: [0.7, 1],
        outputRange: [0, 1],
      }),
      transform: [{
        translateY: this.state.anim.interpolate({
          inputRange: [0, 1],
          outputRange: [-80, 0],
        }),
      }],
    };

    return (
      <TouchableOpacity
        accessibilityLabel={this.props.isAdded ? SAVED_LABEL : ADD_LABEL}
        accessibilityTraits="button"
        onPress={this.props.onPress}
        activeOpacity={0.9}
        style={[styles.container, this.props.style]}>
        <LinearGradient
          start={[0.5, 1]} end={[1, 1]}
          colors={colors}
          collapsable={false}
          style={styles.button}>
          <View style={{flex: 1}}>
            <View style={styles.content} collapsable={false}>
              <Animated.Image
                source={this.props.addedImageSource || require('./img/added.png')}
                style={[styles.icon, addedOpacityImage]}
              />
              <Animated.Text style={[styles.caption, addedOpacity]}>
                <Text>{SAVED_LABEL.toUpperCase()}</Text>
              </Animated.Text>
            </View>
            <View style={styles.content}>
              <Animated.Image
                source={require('./img/add.png')}
                style={[styles.icon, addOpacityImage]}
              />
              <Animated.Text style={[styles.caption, addOpacity]}>
                <Text>{ADD_LABEL.toUpperCase()}</Text>
              </Animated.Text>
            </View>
          </View>
        </LinearGradient>
      </TouchableOpacity>
    );
  }

  componentWillReceiveProps(nextProps: Props) {
    if (this.props.isAdded !== nextProps.isAdded) {
      const toValue = nextProps.isAdded ? 1 : 0;
      Animated.spring(this.state.anim, {toValue}).start();
    }
  }
}

const HEIGHT = 50;

var styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: HEIGHT,
    overflow: 'hidden',
  },
  button: {
    flex: 1,
    borderRadius: HEIGHT / 2,
    backgroundColor: 'transparent',
    paddingHorizontal: 40,
  },
  content: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    marginRight: 12,
  },
  caption: {
    letterSpacing: 1,
    fontSize: 12,
    color: 'white',
  },
});

module.exports = AddToScheduleButton;
//下面是一段難懂的代碼坷澡，上面一句已經(jīng)導(dǎo)出代碼了，這里這一句是什么意思含蓉？
//[到這里找答案](https://f8-app.liaohuqiu.net/tutorials/building-the-f8-app/design/)
module.exports.__cards__ = (define) => {
  let f;
  setInterval(() => f && f(), 1000);

  define('Inactive', (state = true, update) =>
    <AddToScheduleButton isAdded={state} onPress={() => update(!state)} />);

  define('Active', (state = false, update) =>
    <AddToScheduleButton isAdded={state} onPress={() => update(!state)} />);

  define('Animated', (state = false, update) => {
    f = () => update(!state);
    return <AddToScheduleButton isAdded={state} />;
  });
};

這個(gè)組件是在sessionDetail.js中使用的频敛，在這里導(dǎo)入的onPress的方法.這里的session是schedule中的內(nèi)容

//f8app/js/tabs/f8sessionDetail.js
 var {addToSchedule, removeFromScheduleWithPrompt} = require('../../actions');//這一句是比較難理解的，f8這個(gè)組件用
//redux connec進(jìn)行了包裝馅扣，改變state的方法是在redux中
//具體細(xì)節(jié)就不列了斟赚，從圖上可以看到實(shí)際是state發(fā)生了翻轉(zhuǎn)
  <View style={styles.actions}>
          <AddToScheduleButton
            addedImageSource={isReactTalk && require('./img/added-react.png')}
            isAdded={this.props.isAddedToSchedule}
            onPress={this.toggleAdded}  //props傳入的方法
          />
        </View>

//實(shí)際的toggleAdded方法
toggleAdded: function() {
    if (this.props.isAddedToSchedule) {
      this.props.removeFromScheduleWithPrompt();
    } else {
      this.addToSchedule();
    }
  },
//這里的兩個(gè)方法
  addToSchedule: function() {
    if (!this.props.isLoggedIn) {
      this.props.navigator.push({
        login: true, // TODO: Proper route
        callback: this.addToSchedule,
      });
    } else {
      this.props.addToSchedule();
      if (this.props.sharedSchedule === null) {
        setTimeout(() => this.props.navigator.push({share: true}), 1000);
      }
    }
  },
});

reducer里面發(fā)生的狀態(tài)的變化

//f8app/js/reducer/schedule.js
 'use strict';

import type {Action} from '../actions/types';

export type State = {
  [id: string]: boolean;
};

function schedule(state: State = {}, action: Action): State {
  switch (action.type) {
    case 'SESSION_ADDED':
      let added = {};
      added[action.id] = true;  //狀態(tài)改變
      return {...state, ...added};

    case 'SESSION_REMOVED':
      let rest = {...state};
      delete rest[action.id];  //刪除狀態(tài)
      return rest;

    case 'LOGGED_OUT':
      return {};

    case 'RESTORED_SCHEDULE':
      let all = {};
      action.list.forEach((session) => {
        all[session.id] = true;
      });
      return all;
  }
  return state;
}

module.exports = schedule;