0

我的第一个问题是我们可以在 react native 中插入 flex 属性吗？

如果是，那么我在下面有这段代码，我试图在其中插入 flex 属性以实现可拖动的底页，或者你可以说一个模态（就像内置的反应原生模态一样）。

这是构造函数代码>

constructor(){
        super();
        this.state = {
            pan: new Animated.Value(40),
            panResponder: PanResponder.create({
                onMoveShouldSetPanResponder: () => true,
                onPanResponderGrant: () => {
                    console.log('Responder Granted!!');
                    this.state.pan.setOffset(this.state.pan._value);
                },
                onPanResponderMove: (_, gesture) => {
                    this.state.pan.setValue(-gesture.dy);
                    console.log(this.state.pan._value);
                },
                onPanResponderRelease: (_, gesture) => {
                    this.state.pan.flattenOffset();
                    Animated.timing(this.state.pan, {
                        duration: 500,
                        toValue: ((gesture.dy < -100) ? (deviceHeight - this.state.modalMinimumHeight) : ((gesture.dy > 100) ? this.state.modalMinimumHeight : ((this.state.discoverModalVisible) ? (deviceHeight - this.state.modalMinimumHeight) : this.state.modalMinimumHeight))),
                        useNativeDriver: false,
                    }).start();
                    console.log('Responder Released!!');
                    console.log(gesture.dy, this.state.pan._value);
                },
            }),
        }
    }

这是我班级的渲染功能>

render() {
        return(
            <View style={{flex: 1, backgroundColor: 'lightblue'}}>
                <Animated.View
                    style={{
                        position: 'absolute',
                        bottom: 50,
                        left: 0,
                        right: 0,
                        backgroundColor: 'white',
                        // backgroundColor: this.state.pan.interpolate({
                        //     inputRange: [40, deviceHeight - 40],
                        //     outputRange: ['white', 'black'],
                        // }),
                        flex: this.state.pan.interpolate({
                            inputRange: [0, 40, deviceHeight - 40],
                            outputRange: [0, 0.1, 0.9],
                            useNativeDriver: false,
                        }),
                        justifyContent: 'center', 
                        alignItems: 'center',
                    }}
                    {...this.state.panResponder.panHandlers}
                    >
                    <Text style={{
                        flex: 1,
                    }}>
                        Discover
                    </Text>
                </Animated.View>
            </View>
        )
    }

在上面的代码中，我可以插入组件 Animated.View 的背景颜色的值，但是在尝试插入 flex 属性时，我收到如下错误。

不变违规：[7,"RCTView",{"flex":"<>"}] 不能用作本机方法参数

请给出适当的解决方案。:)

4

0 回答 0