react-custom-learning

最近忙自己的项目去了 没时间写博客 卜一翩

1.看一下自定义的router transition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const transitionConfig = () => {
  return {
    // 路由进场动画配置  
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: sceneProps => {
        const { position, layout, scene, index, scenes } = sceneProps
        const toIndex = index
        const thisSceneIndex = scene.index
        const height = layout.initHeight
        const width = layout.initWidth
        // width 上一个router index对应
        const translateX = position.interpolate({
          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
          outputRange: [width, 0, 0]
        })
        const translateFromBottom = position.interpolate({
          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
          outputRange: [height, 0, 0]
        })
        // 这里是从栈顶pop到最底下 所以这里会经过好几个index 从0开始算
        const translateY = position.interpolate({
          inputRange: [0, thisSceneIndex],
          outputRange: [height, 0]
        })
  
        const slideFromRight = { transform: [{ translateX }] }
        const slideFromBottom = { transform: [{ translateY }] }
  
        const lastSceneIndex = scenes[scenes.length - 1].index
  
        // Test whether we're skipping back more than one screen
        if (lastSceneIndex - toIndex > 1) {
          // Do not transoform the screen being navigated to
          if (scene.index === toIndex) return
          // Hide all screens in between
          // Slide top screen down
          return slideFromBottom
        }
  
        // 路由index为3的倍数时  从右划入
        if(toIndex % 3 == 0)
           return slideFromRight
        else
           return { transform: [{ translateY: translateFromBottom }] } 
      }
  }}

2，看下界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 调用 dispatch
export const myAction = () => {
    const nav = NavigationActions.navigate({
      //Let's navigate to Main first
      routeName: 'Main',
      params: {},
      // and then go to BookList 子路由
      action: NavigationActions.navigate({ routeName: 'BookList' })
    });
    return nav;
  };
const backgroundColors = ['#2980b9', '#d35400', '#16a085', '#2c3e50', '#7f8c8d']
const headerColors = ['#f39c12', '#8e44ad', '#2980b9', '#16a085', '#c0392b']
class GoScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    const screenNumber = navigation.state.params ? navigation.state.params.screenNumber : 0
    const headerColor = headerColors[screenNumber % headerColors.length]
    return {
      title: `I am screen ${screenNumber}`,
      headerStyle: {
        backgroundColor: headerColor,
        height: 85,
      },
      headerTitleStyle: {
        color: 'white'
      },
    }
  }
  // 注意push 和 navigate区别
  goForward = () => {
    const screenNumber = this.props.navigation.state.params ? this.props.navigation.state.params.screenNumber : 0
    const params = { screenNumber: screenNumber + 1 }
    this.props.navigation.push('Go', params) 
  }
  // reset就是回到最初
  reset = () => {
    const screenNumber = this.props.navigation.state.params ? this.props.navigation.state.params.screenNumber : 0
    const popAction = StackActions.pop({
        n: screenNumber
    });
    // const resetAction = StackActions.reset({
    //      index: 0,
    //      actions: [
    //        NavigationActions.navigate({ routeName: 'Go'})
    //      ],
    //    })
    this.props.navigation.dispatch(popAction)
  }
  render() {
    const { navigation } = this.props
    const screenNumber = navigation.state.params ? navigation.state.params.screenNumber : 0
    const backgroundColor = backgroundColors[screenNumber % backgroundColors.length]
    return (
      <View style={[styles.container, { backgroundColor }]}>
        <Text style={[styles.jumbo, {textShadowColor: 'yellow', textShadowRadius: 50}]}>{screenNumber}</Text>
        <TouchableOpacity onPress={this.goForward}><Text style={styles.textButton}>GO FORWARD!</Text></TouchableOpacity>
          <TouchableOpacity onPress={this.reset}><Text style={styles.textButton}>RESET!</Text></TouchableOpacity>
      </View>
    )
  }
}

3.可以去注意一下下面的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
  //mainRoute
  routeName: 'Profile',
  params: {},
  
  // subRoute 可选
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});
this.props.navigation.dispatch(navigateAction);

4.看一下这个sidemenu Interactable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
export default class SideMenu extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.sideMenuContainer} pointerEvents='box-none'>
          <Interactable.View
            ref='menuInstance'
            horizontalOnly={true}
            snapPoints={[{x: 0}, {x: -SideMenuWidth}]}
            boundaries={{right: RemainingWidth/2}}
            initialPosition={{x: -SideMenuWidth}}>
            <View style={styles.sideMenu}>
              <Text style={styles.sideMenuTitle}>Menu</Text>
              <TouchableOpacity onPress={() => alert('Button 1 pressed')}>
                <Text style={styles.button}>Button 1</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => alert('Button 2 pressed')}>
                <Text style={styles.button}>Button 2</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => alert('Button 3 pressed')}>
                <Text style={styles.button}>Button 3</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.onClosePress.bind(this)}>
                <Text style={styles.button}>Cancel</Text>
              </TouchableOpacity>
            </View>
          </Interactable.View>
        </View>
        <View style={styles.header}>
          <TouchableOpacity onPress={this.onMenuPress.bind(this)}>
            <Image style={styles.menuIcon} source={require('../../assets/icon-menu.png')} />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>Side Menu Example</Text>
        </View>
        <View style={styles.body}>
          <Text style={styles.content}>Some Content Here</Text>
        </View>
      </View>
    );
  }
  onMenuPress() {
    this.refs['menuInstance'].setVelocity({x: 2000});
  }
  onClosePress() {
    this.refs['menuInstance'].setVelocity({x: -2000});
  }
}

通过setVelocity控制抽屉的开关

  1. useEffect补充
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    // 获取prevprops
    function usePrevious(value) {
      const ref = useRef();
      useEffect(() => {
        ref.current = value;
      });
      return ref.current;
    }
    function Test({number}) {
        const [count, setCount] = useState(0);
        const [count1, setCount1] = useState(0);
        const prevNumber = usePrevious(number);
        const prevCount = usePrevious(count);
        
        useEffect(() => {
              console.log('effect');
               console.log(prevCount, count);
              if(prevNumber == number){
                  console.log('sameme');
                  return
              }
              console.log('sameme111111');
              setCount(number*2);
              return () => {
                  console.log('ffff')
              }
        }, [number, count]) // 只有在number更新的时候 才触发
        return (
            <Fragment>
                <TouchableWithoutFeedback onPress={() => setCount(count+1)}>
                    <View><Text>{count} prev </Text></View>
                </TouchableWithoutFeedback>
                 <TouchableWithoutFeedback onPress={() => setCount1(count1+1)}>
                    <View><Text>{count1} </Text></View>
                </TouchableWithoutFeedback>
            </Fragment>
        )}
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码