小编Iva*_*kiy的帖子

我在带有更多选项按钮的标题中实现了一个弹出组件。此按钮仅在 上可用UserProfileScreen。当您按下它时，您会看到两个按钮：“设置”和“注销”。该问题与设置按钮有关。

预期行为： 按设置按钮 -> this.props.navigation.navigate('SettingsNavigator') 被调用 -> SettingsScreen 显示

实际行为： 按设置按钮 -> console.warn('go to settings') 被调用，仅此而已（您不会被重定向到 SettingsScreen）。

SettingsNavigator.js

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import SettingsScreen from './SettingsScreen';
import EditProfileScreen from './EditProfileScreen';
import RemoveProfileScreen from './RemoveProfileScreen';

const SettingsNavigator = createStackNavigator({
    SettingsScreen: SettingsScreen,
    EditProfile: EditProfileScreen,
    RemoveProfile: RemoveProfileScreen
}, {
    initialRouteName: 'SettingsScreen'
});

export default SettingsNavigator;

optionHeaderButton.js

import { withNavigation } from 'react-navigation';
...

class OptionsHeaderButton extends Component {

    ...

    navigateToSettings = () => { …

我正尝试使用Grid View渲染图像，FlatList但面临下一个问题：

我的代码段：

...
renderItem = ({item}) => {
        return (
        <Image source = {{uri: item.photoUrl[0].photoUrl}} style = {{margin: 1,
                                                                    height: Dimensions.get('window').width / 3,
                                                                    width: Dimensions.get('window').width / 3,
                                                                    resizeMode: 'cover'}}
        />
    )
}

render() {
    if(this.props.viewOption === 'grid') {
        return <FlatList
                    data = {this.state.photosKeysArray}
                    keyExtractor={(item, index) => item.id}
                    numColumns = {3}
                    renderItem={this.renderItem}
                />
    } ...

问题是FlatList应该根据item自己计算宽度numColumns，对吗？因此，Image我应该只指定高度。由于我要渲染正方形图像，因此我给高度分配了一个等于的值Dimensions.get('window').width/3，其中3的值为numColumns。

之后，FlatList呈现空白而不是图像。

如果我将width属性添加到Image（例如在我的代码段中）并将其定义为高度（正方形图像，还记得吗？），那么FlatList会渲染3列带有正方形图像的列，但它们在我的草图上显示为（两个完整图像，最后一列被切掉） ）：

如何显示三整列？