FlatList renderItem 正在触发，console.logs 可见，但文本不可见。文字怎么了？

Question

我有一个硬编码的 JSON 对象，只是为了确保 FlatList 中的项目能够正确呈现。我可以阅读我在里面写的所有 console.logs，但是文本的 none 出现了。有什么想法吗？

代码如下：

import { 
        View,
        FlatList,
        Text,
        TouchableWithoutFeedback,
        AsyncStorage,
        ScrollView,
        Picker

        } from 'react-native'

import { NavigationActions } from 'react-navigation';
import { Header, Card, CardSection, Button, Input } from '../common';
import Config from '../Config';

export default class CustomStore extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stores: [],
            forceRedraw: false
        };
    }

    static defaultProps = {
        //stores:[{"place": "youngja", "id": "1"},{"place": "tasty", "id": "2"}]
    };

    componentWillMount() {
        const newJSON = {"gym":{"id":"1", "day": "Sunday"}, "restaurant":{"id": "2", "day": "Monday"}};
            const JSArr = Object.values(newJSON);
            //console.log(JSArr);
            this.setState({
                stores: JSArr
            });
    }
    deleteEntry() {
        console.log('this is working')   
    }
    renderListOfStores() {
        return <FlatList
                    data={this.state.stores}
                    renderItem={ (item) => {
                        console.log('here is your thing',item);
                        this.singleStore(item)}
                    }
                    keyExtractor={(item) => item.id}        
                />;
    }

    singleStore(item) {
        return <View>
            {console.log('inside the singleStore method')}
                    <Card>
                        <Text>hello{console.log('this is inside the text tag')}{item.day}</Text>
                        <Button
                                onPress={() => this.deleteEntry()}
                            >
                                <Text>Press this to delete this entry</Text>
                        </Button>
                    </Card>
            </View>;
    }
    render() {

        return(
            <ScrollView> 
                <Header headerText="Custom Store Screen"/>
                <Text>This should be a list of stores</Text>
                {this.renderListOfStores()}
                <Text>This is the end of the list</Text>
            </ScrollView>
        )
    }
}

如您所见，我已将 console.logs 放入 renderListOfStores 方法中以验证它是否被触发。我在 singleStore 方法中还有另一个 console.log。这个控制台日志也是可见的。就像标签中的最后一个控制台日志一样。不知道为什么我能够阅读 console.logs，但 none 的文本

Answer 1

您需要在 renderItem 道具中的 this.singleStore() 之前放置 return。

FlatList renderItem 正在触发，console.logs 可见，但文本不可见。文字怎么了？

FlatList renderItem is firing, console.logs are visible, but text is not. What happened to the text?

react-native

react-native-flatlist