Question

我有TabNavigator内置摄像头。代码示例：

我的 index.android.js

const MainNavigator = TabNavigator({
    Home: { screen: QRcreatorScreen },
    Contacts: { screen: ContactsScreen },
    Camera: { screen: CameraScreen },
    Profile: { screen: ProfileScreen },
  }, {
  tabBarPosition: 'bottom',
  lazy: true
});

和我的相机页面：

export default class CameraScreen extends React.Component {

  static navigationOptions = { 
    title: 'Camera', 
  };

  emitContact() {
    alert("Contact been added");
  }

  render() {
    return (
        <QRCodeScanner onRead={(e) => {
                               SetNewContact(e.data, () => { this.emitContact() })
                            }} 
             topContent={<Text>Just show me another code</Text>} 
             showMarker={true}
             bottomContent={(
                <TouchableOpacity style={styles.buttonTouchable}>
                    <Text style={styles.buttonText} 
                          onPress={ () => this.props.navigation.dispatch(resetAction) }>OK. Got it!
                    </Text>
                </TouchableOpacity>
           )}
        />
    );
  };
}

只是简单的QR码阅读器。

接下来是问题：当TabNavigator选项设置为lazy == false时，TabNavigator会在应用启动时渲染所有场景。

当lazy == true时，场景在被调用时呈现，但是当我们调用最后一个场景时（在我们的例子中为Profile），前面的所有场景也都会渲染。

因此，当我点击Profile时，需要一些时间来加载所有场景，这对应用程序性能来说非常糟糕。

在调用相机页面时，我需要做什么？

还有一个问题：当我们离开相机现场时，相机仍在工作，离开现场时我怎么能把它关掉？

我正在使用使用react-native-qrcode-scanner

的包react-native-camera: ^0.10.0

Answer 1

如果某人有兴趣我找到答案。

我正在使用react-native-tab-navigator与原生StackNavigator。

我如何关闭相机：

  render() {
    let QrScanner = this.state.showScanner ? <QrScannerElement navigation={this.props.navigation}/> : null
    return (
      <View style={styles.container}>
        {QrScanner}      
      </View>
    );
  };

在以下情况下更改状态处于活动状态：

  componentDidMount () {
    event.addListener('cameraUnpressed', () => {
      this.setState({showScanner: false})
    });
    event.addListener('camera', () => { 
      this.setState({showScanner: true})
    });    
  }

在react-native-tab-navigator中我们可以获得状态his.state.selectedTab，如果在我的情况下它不是“相机”，我们会发送该事件。

我的例子：

  cameraPressed() {
    this.setState({ selectedTab: 'camera' });
    event.emit('camera');
  }

  cameraUnPressed(page) {
    if(this.state.selectedTab == 'camera') event.emit('cameraUnpressed');
    this.setState({ selectedTab: page });
  }

带摄像头的React-Native TabNavigator（摄像头始终打开）

1 个答案: