0

我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>
           )}
        />
    );
  };
}

只需简单的二维码阅读器。

下一个问题是：当TabNavigator设置了选项时，在应用程序启动lazy == false时TabNavigator渲染他的所有场景。

什么时候lazy == true，场景被调用时正在渲染，但是当我们调用最后一个场景（在我们的例子中Profile）时，前面的所有场景也在渲染。

所以当我点击 时Profile，需要一些时间来加载所有场景，这对应用程序性能非常不利。

我需要做什么才能使相机页面仅在被调用时才呈现？

还有一个问题：当我们离开相机场景时，相机还在工作，离开场景时如何关闭它？

我正在使用正在使用react-native-qrcode-scanner的包react-native-camera: ^0.10.0

4

1 回答 1

0

如果有人感兴趣，我找到了答案。

我正在使用react-native-tab-navigatornative 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 });
  }
于 2017-09-05T14:07:32.650 回答