陣營，TabNavigator的原住民用相機（相機總是）

我TabNavigator與相機內部。代碼示例：陣營，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

來源

2017-09-01 Роман Сафонов

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

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

來源

2017-09-05 14:07:32

陣營，TabNavigator的原住民用相機（相機總是）

回答

相關問題