Question

目前观看图像的最佳模块是什么？我想找到类似https://github.com/oblador/react-native-lightbox的内容已滑动以消除功能等。但是这个模块似乎已经过时了。这里的任何人都使用与最新版React Native相似的任何类似内容吗？

我可以用来查看图像，捏缩放，滑动到关闭的东西对我的应用程序来说是必不可少的。

Answer 1

首先，您必须了解routerFlux。然后转到api并阅读LightBox组件......

所以这里是你制作一个箱灯的简单代码：

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>

        )
    }
}

现在让我们制作两类 BaseLightBox ：

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>
        )
    }
}

反应原生灯箱

1 个答案: