Question

我正在尝试在React Native中制作一个条形码扫描仪应用程序。我已经在单独的演示应用程序中使用了条形码扫描仪和导航扫描仪，但是现在我试图将它们组合在一起，但是在将RNCamera预览显示在StackNavigator视图中时遇到了麻烦。从HomePage过渡到ScanPage时，我看到的只是一张空白的白色视图。

Example

但是，如果我只包含RNCamera对象而没有StackNavigator，它看起来就很好。您是否需要调整RNCamera的属性以使其适合StackNavigator视图？

我的代码如下。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableOpacity,} from 'react-native';
import {createStackNavigator, createAppContainer, withNavigationFocus} from 'react-navigation';
import { RNCamera } from 'react-native-camera';

type Props = {};
class HomePage extends Component<Props> {
  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>This is the home page!</Text>
        <Button
          title="Scan Barcode"
          onPress={() => navigate('ScanPage')}
        />
      </View>
    );
  }
}

class ScanPage extends Component<Props> {
  
  constructor(props) {
    super(props);
    this.state = {
      qrcode: ''
    }
  }

  onBarCodeRead = (e) => this.setState({qrcode: e.data});
  
  static navigationOptions = {
    title: 'Scan',
  };

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {this.camera = ref;}}
          onBarCodeRead={this.onBarCodeRead}
          captureAudio={false}
        >
        </RNCamera>
        <Text style={{backgroundColor: 'white'}}>{this.state.qrcode}</Text>
      </View>
    );
  }
}

const MainNavigator = createStackNavigator({
  HomePage: {screen: HomePage},
  ScanPage: {screen: ScanPage}
});

const App = createAppContainer(MainNavigator);

export default App;

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,
  },
});

预先感谢您的帮助！

RNCamera预览未出现在StackNavigator中

0 个答案: