在本机反应中插入 flex prop

编程问答 2022-05-11

问题描述

我的第一个问题是，我们可以在 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,outputRange: [0,0.1,0.9],justifyContent: 'center',alignItems: 'center',}}
                    {...this.state.panResponder.panHandlers}
                    >
                    <Text style={{
                        flex: 1,}}>
                        discover
                    </Text>
                </Animated.View>
            </View>
        )
    }

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

Invariant Violation: [7,"RCTView",{"flex":""}] 不能用作本地方法参数

请给出正确的解决方案。 :)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationflexboxinterpolationpanresponderreact-native