如何使用 react-native-fs？

Question

如果componentWillMount()函数是运行第一次，items数组为空。为什么？

componentWillMount() {
    items.splice(0, items.length);
    RNFS.readDir(RNFS.DocumentDirectoryPath)
    .then((result) => {
        console.warn('result: ', result); // debug

        for(var i = 0; i < result.length; i++) {
            if(result[i].name.endsWith('.txt')) {
               var tmp = result[i].name;
               console.warn(tmp); // debug
               items.push(tmp);
            }
        }
    })
    .catch((err) => {
        console.log(err.message, err.code);
    });

    console.warn(items); // empty
}

并且使用readFile()获取.txt的内容，con为空

renderItem(item) {
    return (
        <View style = {styles.renderItemContainer}
        key={items.indexOf(item)} >
            <TouchableOpacity style={styles.renderItemTouchableOpacity}
                onPress = {() => {
                    fileName = item;

                    var path = RNFS.DocumentDirectoryPath + '/' + fileName;

                    RNFS.readFile(path, 'utf8')
                    .then((contents) => {    
                        console.warn(contents); 
                       con = contents; // not working
                    })
                    .catch((err) => {
                        console.log(err.message, err.code);
                    });

                    console.warn(con); // empty

                    this.props.navigation.navigate('editorScreen');
                }}>
                <Text style = {styles.renderItemText}>
                    {item}
                </Text>
            </TouchableOpacity>
        </View>
    );
}

在 render() 函数中，使用 items 数组列出 ScrollView

中的 .txt 文件

render() {
    return(
        ....
        <ScrollView>
            {
                items.map((items) => this.renderItem(items))
            }
        </ScrollView>
        ....
    );
}

Answer 1

尝试：

componentWillMount() {
items.splice(0, items.length);
RNFS.readDir(RNFS.DocumentDirectoryPath)
.then((result) => {
    console.warn('result: ', result); // debug

    for(var i = 0; i < result.length; i++) {
        if(result[i].name.endsWith('.txt')) {
           var tmp = result[i].name;
           console.warn(tmp); // debug
           items.push(tmp);
        }

    }
    console.warn(items); // empty
})
.catch((err) => {
    console.log(err.message, err.code);
});


}

你的 promise 异步运行 => console.warn 在 promise 解析之前被调用 (.then(...))

如何使用 react-native-fs？

How to use react-native-fs?

javascript

arrays

react-native

react-native-fs