如何在 React native 中单击按钮打开文档选择器
How to Open Document Picker on Button Click in React native
我已经尝试过此 link (https://www.npmjs.com/package/react-native-document-picker) 中给出的方法,但它会在表单加载本身上打开文档选择器。
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
TryUploadFile = () => {
DocumentPicker.show({
filetype: [DocumentPickerUtil.images()],
},(error,res) => {
// Android
console.log(
res.uri,
res.type, // mime type
res.fileName,
res.fileSize
);
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button title="Upload File" onPress={this.TryUploadFile()}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
但是它在加载应用程序时正在加载文档选择器,广告提示可见。
将按钮上的 onPress={this.TryUploadFile()}
更改为 onPress={this.TryUploadFile}
我已经尝试过此 link (https://www.npmjs.com/package/react-native-document-picker) 中给出的方法,但它会在表单加载本身上打开文档选择器。
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
TryUploadFile = () => {
DocumentPicker.show({
filetype: [DocumentPickerUtil.images()],
},(error,res) => {
// Android
console.log(
res.uri,
res.type, // mime type
res.fileName,
res.fileSize
);
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button title="Upload File" onPress={this.TryUploadFile()}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
但是它在加载应用程序时正在加载文档选择器,广告提示可见。
将按钮上的 onPress={this.TryUploadFile()}
更改为 onPress={this.TryUploadFile}