react-native - 如何修复 React Native 中自定义标签栏的行为？

Question

我正在尝试tabbar在React Native. 我以前只用 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'
},
}

Answer 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>