如何修复 React Native 中自定义标签栏的行为？答案

【问题标题】：How to fix the behaviour of a custom tabbar in React Native?如何修复 React Native 中自定义标签栏的行为？
【发布时间】：2020-02-12 11:21:09
【问题描述】：

我正在尝试在React Native 中实现自定义tabbar。我之前只用了 2 个标签就完成了它，并且它有效。但是现在我有 4 个选项卡，即使单击第三个选项卡中的第二个，它似乎也只会在第一个选项卡和最后一个选项卡之间切换。

这是布局的截图

这是我点击第二个标签时发生的事情

这是component的代码

state = {
    active: 0,
    xTabOne: 0,
    xTabTwo: 0,
    xTabThree: 0,
    xTabFour: 0,
    translateX: new Animated.Value(0),
}

handleSlide = type => {
    let { active, translateX } = this.state;
    Animated.spring(translateX, {
        toValue: type,
        duration: 100,
    }).start()
}

render() {
    let { active, xTabOne, xTabTwo, xTabThree, xTabFour, translateX } = this.state;
    return (
        <Container style={styles.container}>
            <StatusBar barStyle="light-content" />
            <Text style={styles.topText}>XXXXXXX</Text>
            <View style={styles.tabsContainer}>
                <Animated.View style={{
                    position: 'absolute',
                    width: '25%',
                    height: '100%',
                    top: 0,
                    left: 0,
                    backgroundColor: '#fff',
                    borderRadius: 17,
                    transform: [{ translateX }]
                }} />
                <TouchableOpacity
                    style={styles.tabComponent}
                    onLayout={event => this.setState({
                        xTabOne: event.nativeEvent.layout.x
                    })}
                    onPress={() => this.setState({ active: 0 }, () => this.handleSlide(xTabOne))}
                >
                    <Text style={{ color: active === 0 ? '#0022FF' : '#fff' }}>Back left</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.tabComponent}
                    onLayout={event => this.setState({
                        xTabTwo: event.nativeEvent.layout.x
                    })}
                    onPress={() => this.setState({ active: 1 }, () => this.handleSlide(xTabTwo))}
                >
                    <Text style={{ color: active === 1 ? '#0022FF' : '#fff' }}>Back right</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.tabComponent}
                    onLayout={event => this.setState({
                        xTabTwo: event.nativeEvent.layout.x
                    })}
                    onPress={() => this.setState({ active: 2 }, () => this.handleSlide(xTabThree))}
                >
                    <Text style={{ color: active === 2 ? '#0022FF' : '#fff' }}>Front left</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.tabComponent}
                    onLayout={event => this.setState({
                        xTabTwo: event.nativeEvent.layout.x
                    })}
                    onPress={() => this.setState({ active: 3 }, () => this.handleSlide(xTabFour))}
                >
                    <Text style={{ color: active === 3 ? '#0022FF' : '#fff' }}>Front right</Text>
                </TouchableOpacity>
            </View>

        </Container>
    );
}

这里是风格

export default {
container: {
    flex: 1,
    justifyContent: "flex-start",
    paddingTop: 50,
    backgroundColor: COLORS.BLUE_COLOR,
    flexDirection: 'column',

},
tabsContainer: {
    flexDirection: 'row',
    marginBottom: 20,
    marginLeft: 20,
    marginRight: 20,
    height: 30,
    position: 'relative',
},
tabComponent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
},
topText: {
    left: 20,
    paddingBottom: 20,
    fontWeight: 'bold',
    fontSize: 20,
    color: 'white'
},
}

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-component

【解决方案1】：

错误在于设置第三个和第四个TouchableOpacity的状态

<TouchableOpacity
                style={styles.tabComponent}
                onLayout={event => this.setState({
                    xTabThree: event.nativeEvent.layout.x
                })}
                onPress={() => this.setState({ active: 2 }, () => this.handleSlide(xTabThree))}
            >
                <Text style={{ color: active === 2 ? '#0022FF' : '#fff' }}>Front left</Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={styles.tabComponent}
                onLayout={event => this.setState({
                    xTabFour: event.nativeEvent.layout.x
                })}
                onPress={() => this.setState({ active: 3 }, () => this.handleSlide(xTabFour))}
            >
                <Text style={{ color: active === 3 ? '#0022FF' : '#fff' }}>Front right</Text>
            </TouchableOpacity>

【讨论】：