我正在尝试制作简单的词典项目，我将CouchDB用于远程服务器，将pouchDB用于本地。
并且我使用远程文本文件在本地数据库中预加载数据。
这是我的代码
import React, { Component } from 'react';
...
import { localNoteDb, nameIndex, remote_url, remoteNoteDb } from '../const'
...
let handlerSync = null
class Home extends Component {
constructor(props) {
super(props);
this.state = {
arrNote1: [],
arrNotee: [],
isLoading: false,
text: '',
count: 0,
data1: 0,
data2: 0,
indicator: false,
flagadd: false,
notfoundFlag: false
}
}
....
componentDidMount() {
this.getListNoteFromDb();
}
componentWillUnmount() {
this.getListNoteFromDb();
}
syncDb = () => {
this.setState({ isLoading: true });
//here is my text file to pre load the data from remote amazon s3 text file
localNoteDb.load('https://dictionary.s3.ap-north-14321.amazonaws.com/dumpdb.txt', { proxy: remote_url }).then(() => {
localNoteDb.replicate.from(remote_url).on('complete', function () {
console.log("DONE>>>>>>>")
}).on('error', function (err) {
console.log("ERROR>>>>>" + JSON.stringify(err))
});
var temp = localNoteDb.replicate.from(remote_url, {
live: true,
retry: true
});
this.setState({ isLoading: false });
return temp;
}).catch((err) => {
this.setState({ isLoading: false });
});
};
getListNoteFromDb = () => {
this.setState({ isLoading: true })
fetch("http://myipaddress:5984/dictionary")
.then(Response => Response.json())
.then(response => {
localNoteDb.info().then((resp) => {
console.log(JSON.stringify(resp))
//resp will contain disk_size
if (resp.doc_count !== response.doc_count) {
this.syncDb();
} else {
this.setState({ isLoading: false })
}
}).catch((err) => {
console.log("ERROR<<<<<<" + err);
});
});
}
getListNoteFromDbText = (txt) => {
this.setState({ text: txt, indicator: true, notfoundFlag: false })
clearTimeout(this.timer);
this.timer = setTimeout(function () {
localNoteDb
.allDocs({
include_docs: true,
attachments: true,
startkey: txt.toLowerCase(),
endkey: txt.toLowerCase() + '\ufff0'
}).then(function (result) {
if (result.rows.length > 0) {
// handle result
this.setState({
indicator: false,
arrNote1: result.rows.slice(0, 10)
})
clearTimeout(this.timer);
} else {
this.setState({
indicator: false,
notfoundFlag: true
})
}
}.bind(this))
.catch(err => {
this.setState({ isLoading: false })
Toast.show(err.message)
})
}.bind(this),
100
);
}
renderItem = ({ item }) => {
console.log("ITEMS....." + JSON.stringify(item));
return (
<TouchableHighlight
underlayColor={'#98c5ba'}
onPress={() => {
this.isAtCurrentScreen = false
this.props.addWordHistory(item.doc)
this.props.navigation.navigate('DetailsMeaning', {
idNote: item.doc,
})
}}
style={{ marginLeft: 10, marginTop: 3, marginRight: 10 }}
>
<Text numberOfLines={1} style={{ color: '#29282A', margin: 5, fontSize: 16, fontFamily: 'Roboto-Regular' }}>{item.doc._id}</Text>
</TouchableHighlight>
)
}
render() {
return this.state.isLoading ? <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#f3fffc' }}><ActivityIndicator size="large" color="#ff6a00" /><Text>Fetching Data Please wait...</Text></View> : <View style={{ flex: 1, backgroundColor: '#f3fffc', zIndex: 1 }}><View style={{ marginLeft: 15, marginRight: 15, zIndex: 2, marginTop: -28 }}>
<SearchBar
placeholder="Type Here..."
lightTheme={true}
color='black'
searchIcon={{ size: 30, color: '#3ea58d' }}
inputStyle={{ backgroundColor: 'white' }}
inputContainerStyle={{ backgroundColor: 'white', height: 30 }}
containerStyle={{ backgroundColor: 'white', borderWidth: 1, borderColor: '#3ea58d', borderRadius: 5 }}
onChangeText={(text) => this.getListNoteFromDbText(text)}
value={this.state.text}
/>
</View>
{this.state.text === '' ? <Text></Text> :
(this.state.indicator ? <View style={{ flex: 1 }}><ActivityIndicator size="large" color="#ff6a00" /></View> : <View style={{ flex: 1, flexDirection: 'column' }}><Text style={{ backgroundColor: '#98c5ba', textAlign: 'center', color: 'white', marginTop: 5, marginLeft: 15, marginRight: 15, borderRadius: 3, fontFamily: 'Roboto-Black' }}>RESULTS</Text>{this.state.notfoundFlag ? (<Text style={{ textAlign: 'center', color: 'black', marginTop: 50, fontSize: 21, fontWeight: 'bold', fontStyle: 'italic' }}>Not Found</Text>) : (<FlatList
style={{ backgroundColor: '#f3fffc', marginTop: 6 }}
data={this.state.arrNote1}
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItem}
/>)}</View>)}
<View style={{ marginTop: 1, position: 'absolute', bottom: 0 }}>
<AdsBanner />
</View>
</View>
}
}
const mapStateToProps = (state) => {
return {
wordHistory: state.addHistory.wordDetails
}
}
const mapDispatchToProps = (dispatch) => {
return {
addWordHistory: (product) => dispatch({ type: 'ADD_WORD', payload: product })
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Base64代码，我将链接放在索引中。
import {decode, encode} from 'base-64'
if (!global.btoa) {
global.btoa = encode;
}
if (!global.atob) {
global.atob = decode;
}
process.browser = true
它在调试模式下可以正常工作，但在发布模式下则不能。
我有与此相同的问题
React Native atob() / btoa() not working without remote JS debugging
通过放置base64代码，一切在调试模式下都可以正常工作，但是当我执行./gradlew assembleRelease并测试apk时，数据无法加载。
在版本apk中也显示与上述相同的问题。
它与base64问题或任何其他问题有关吗？ 请帮忙。 谢谢。