1

我还没有准备好将我的应用程序锁定为纵向模式，直到我确定我们无法解决这个问题。

曾经有一个容器叫SwipeListView. 是第三方包，不知道的可以看看这个零食：react-native-swipe-list-view。它正在工作，但是当我翻转设备时，每行的背面层不会延伸到屏幕的整个宽度（纵向->横向）

列表项本身可以很好地拉伸，但后面的层（带有按钮）会保持其原始宽度。
这SwipeListView是renderItem用于项目数据和renderHiddenItem每行背面层的它：

<SafeAreaView style={{flex:1}}>
    <SwipeListView
        keyExtractor={Child.keyExtractor}
        data={this.props.children}
        renderItem={(itemInfo, rowMap) => {
            return <ChildListItem child={itemInfo.item}
                onPress={() => console.log("Row pressed: ", itemInfo)} />
        }}
        renderHiddenItem={(itemInfo, rowMap) => {
            return <ChildListHiddenItem child={itemInfo.item}
                onEdit={() => this.props.openEditChildDialog(true, itemInfo.item.id)}
                onDelete={() => this.props.openDeleteChildDialog(true)} />
        }}
        onRowDidOpen={rowKey => console.log(`Row with key ${rowKey} openend`)}
        leftOpenValue={75}
        rightOpenValue={-75}
        previewRowKey={'0'}
        previewOpenValue={-40}
        previewOpenDelay={3000}
    />
</SafeAreaView>

为了篇幅的缘故，我就不给你了ChildListItem。这是ChildListHiddenItem：

class CChildListHiddenItem
extends Component<IChildListHiddenItemProps>
implements ComponentLifecycle<IChildListHiddenItemProps, {}> {
    shouldComponentUpdate(nextProps: Readonly<IStyleState>, nextState: Readonly<IStyleState>, nextContext: any): boolean {
        return this.props.orientation !== nextProps.orientation;
    }

    render() {
        const {
            child,
            style,
            onDelete,
            onEdit,
            ...viewProps
        } = this.props;
        return(

            <LinearGradient
                style={[
                    styles.containers.listHiddenItem,
                    {flexBasis: this.props.dimensions.width}, \\ <----- OVER HERE
                    // orientationAwareStyles.apply.flexBasisFull,
                    style
                ]}
                colors={['red','transparent', 'green']}
                start={{x: 0, y: .5}} end={{x: 1, y: .5}}
                locations={[0.1,0.5,0.9]}
                {...viewProps}
            >
                <Buttons.ListDelete onPress={onDelete} />{/* iconName="user-minus" */}
                <Buttons.ListEdit onPress={onEdit} />{/* iconName="user-edit" */}
            </LinearGradient>
        )
    }
}
const mapStateToChildListHiddenItemProps = ((state:IStore) => {
    return {
        orientation: state.style.orientation,
        dimensions: state.style.dimensions,
    };
});

// @ts-ignore
export const ChildListHiddenItem = connect<IStore>(mapStateToChildListHiddenItemProps, null)(CChildListHiddenItem);

以及应用的 StyleSheet 属性：

listHiddenItem: {
    flex:1,
    flexDirection: 'row',
    flexBasis: dimWindow.width,
    flexWrap: "nowrap",
    justifyContent: 'space-between',
    height: 50,
},

我也将为您省去更新的逻辑，this.props.dimensions因为我已经通过在渲染函数中放置一个断点来确认该值已正确更新。

有什么想法或过去的经验吗？

PS：如果您需要它：

二进制文件：
节点：13.9.0 - C:\Program Files\nodejs\node.EXE
npm：6.13.7 - C:\Program Files\nodejs\npm.CMD
IDE：
Android Studio：版本 3.6.0.0 AI-192.7142.36.36 .6241897
npmPackages：
反应：16.9.0 => 16.9.0
反应原生：^0.61.5 => 0.61.5

尝试更新

<View
    style={[
        styles.containers.listHiddenItem,
        {flexBasis: this.props.dimensions.width},
        // orientationAwareStyles.apply.flexBasisFull,
        style
    ]}
    {...viewProps}
>
    <Buttons.ListDelete onPress={onDelete} />{/* iconName="user-minus" */}
    <LinearGradient
        style={{flex:1, flexGrow:1}}
        colors={['red','transparent', 'green']}
        start={{x: 0, y: .5}} end={{x: 1, y: .5}}
        locations={[0.1,0.5,0.9]}
    />
    <Buttons.ListEdit onPress={onEdit} />{/* iconName="user-edit" */}
</View>

LinearGradient向下移动了一层，使用并且flexGrow仍然flexShrink无济于事，这证明它是未使用新容器更新的容器flexBasis

4

0 回答 0