ネイティブライトボックスに反応します

Question

今すぐ画像を表示するには最高のモジュールはありますか？私はhttps://github.com/oblador/react-native-lightbox のようなものを見つけたかったので、そのような機能を閉じるためにスワイプしました。しかし、このモジュールは古くなっているようです。誰でもここでReact Nativeの最新バージョンで動作する類似のものを使用しますか？

画像を表示したり、ズームしたり、スワイプしてスワイプしたりして、アプリには欠かせないものがあります。

Answer 1

まず、routerFluxについて知っておく必要があります。その後、APIにアクセスし、LightBoxコンポーネントを読む...

をので、ここであなたがboxlight作る簡単なコードです：

import React from 'react'; 
import { View , Text } from 'react-native'; 
import { Router , Scene , Lightbox} from 'react-native-router-flux'; 


// Components 
import ButtonPage from "./components/ButtonPage"; 
import LoginLightbox from "./components/lightbox/LoginLightbox"; 


class loginLightbox extends React.Component { 
    render() { 
     return (
      <View style={{ flex : 1 , justifyContent: 'center' , alignItems: 'center'}}> 
       <Text>lightBox</Text> 
      </View> 
     ) 
    } 
} 

export default class App extends React.Component { 
    render() { 
     return (
      <Router> 
       <Lightbox> 
        <Scene key="root"> 
         <Scene key="button" component={ButtonPage } title="ButtonPage " initial/> 
        </Scene> 

        <Scene key="loginLightbox" component={loginLightbox} /> 
       </Lightbox> 
      </Router> 
     ) 
    } 
} 

を、これはButtonPageです：

import React from 'react'; 
import { Container , Button } from 'native-base'; 
import { Actions } from 'react-native-router-flux'; 
import { form } from './../assets/styles'; 

export default class ButtonPage extends React.Component { 
    render() { 
     return (
      <Container> 
       <Button full style={form.submitButton} onPress={() => Actions.loginLightbox()}> 
        <Text style={form.submitText}>ورود</Text> 
       </Button> 
      </Container> 

     ) 
    } 
} 

が今することができますトウクラスを作るベースライト：

import React from 'react'; 
import { Animated , Dimensions } from 'react-native'; 
import {View, Button, Text, Icon} from 'native-base'; 
import EStyleSheet from 'react-native-extended-stylesheet'; 
import { Actions } from 'react-native-router-flux'; 
const { height : deviceHeight , width : deviceWidth} = Dimensions.get('window'); 

export default class BaseLightbox extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      opacity : new Animated.Value(0) 
     } 

    } 

    componentWillMount() { 
     Animated.timing(this.state.opacity,{ 
      toValue : 1, 
      duration : 200 
     }).start(); 
    } 

    close() { 
     Animated.timing(this.state.opacity,{ 
      toValue : 0, 
      duration : 200 
     }).start(Actions.pop); 
    } 

    _renderLightbox() { 
     const { children , verticalPercent = 1 , horizontalPercent = 1 } = this.props; 
     const width = verticalPercent ? deviceWidth * verticalPercent : deviceWidth; 
     const height = horizontalPercent ? deviceHeight * horizontalPercent : deviceHeight; 
     return (
      <View style={{ width , height, justifyContent: 'center' , alignItems: 'center' , backgroundColor : 'white' , borderRadius : 4}}> 
       {children} 
       <Button transparent style={{ position: 'absolute', top : 0 , left : 0}} onPress={() => this.close() }> 
        <Icon name='md-close-circle' style={{ fontSize : 30 , color : '#34495e'}}/> 
       </Button> 
      </View> 
     ) 
    } 

    render() { 
     return (
      <Animated.View style={[styles.container , { opacity : this.state.opacity }]}> 
       {this._renderLightbox()} 
      </Animated.View> 
     ) 
    } 

} 

const styles = EStyleSheet.create({ 
    container : { 
     backgroundColor: 'rgba(52,52,52,.5)', 
     position: 'absolute', 
     top : 0 , 
     bottom : 0, 
     left : 0, 
     right : 0, 
     justifyContent: 'center', 
     alignItems: 'center' 
    } 
}) 

とLoginLightBox：

import React from 'react'; 
import { Animated , Text } from 'react-native'; 
import BaseLightbox from "./BaseLightbox"; 


export default class LoginLightbox extends React.Component { 


    render() { 
     return (
      <BaseLightbox verticalPercent={0.7} horizontalPercent={0.5}> 
       <Text>Welcome to roocket</Text> 
       <Text>Learn React native</Text> 
      </BaseLightbox> 
     ) 
    } 
}