Question

我需要通过标题中的右键打开一个模态，我能够做到这一点。问题是模态应该是页面宽度的3/4，前一页的其余1/4应该是页面宽度的可见。

StackNavigator代码在下面

FilterOptions: {
  screen: FilterOptions,
  transparentCard: true,
  navigationOptions: {
    headerMode: "none",
    header: null,
    modal: "modal",
    transparentCard: true,
  }, cardStyle: {
    backgroundColor: "transparent",
    opacity: 1
  }
}

FilterOptions页面代码为

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';

class ModalExample extends Component {

render() {
    return (

        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', backgroundColor: "transparent" }}>

            <View style={{ height: "100%", width: '70%', backgroundColor: "#fff", justifyContent: "center" }}>
                <Text>Testing a modal with transparent background</Text>
            </View>
        </View>

    );
}
}
export default ModalExample

任何人都可以帮忙做到这一点。

Answer 1

您使用react-navigation还是react-native导航？

您不必使用StackNavigator

您可以使用react-native {Animated}

Answer 2

您是否遵循过docs？如果是，则可以通过直接设置其容器大小来更改模式大小。

如果您对React Navigation的模式有一些麻烦，我建议您使用React-Native's one，因为它最好在未满量程时使用。

从标题中的右侧图标打开模态-反应导航

2 个答案: