如何在 React Native 中切断/裁剪容器的底部和顶部

Question

我正在开发一个“卷轴”类型的应用程序，但我希望用户的注意力主要集中在中间的水平线上。现在，我的容器正在部分裁剪底部卷轴面板，这实际上是我想要的行为。但是，它使顶部面板完好无损。如何确保顶部和底部同样被“切断”，只留下中间显示清晰且完全可见？

这里是它当前外观的链接：https://imgur.com/a/pYBVtWo。我希望顶部像底部一样被切掉。

下面附上相关代码——当我收缩slotContainer的“flex”时，底部向上收缩。

import React, {useRef} from 'react';
import {View, StyleSheet, Button, Text} from 'react-native';
import ReelGroup from '../Slots/ReelGroup';

// Implement SPIN Function using ReelGroup Spin within Functional Component
export default function RandomStockScreen(props) {
  const reelGroup = useRef();

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Myster Stock</Text>
      <View style={styles.slotsContainer}>
        <ReelGroup ref={reelGroup} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="New Stock" onPress={() => reelGroup.current.spin()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  titleText: {
    color: 'white',
    fontSize: 20, 
    fontWeight: 'bold',
    marginTop: '10%',
    textAlign: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  slotsContainer: {
    flex: 0.9,
    marginHorizontal: '3%',
    justifyContent: 'center',
    backgroundColor: 'grey',
  },
  buttonContainer: {
    flex: 0.1,
    backgroundColor: 'blue',
    marginTop: '1%',
    marginHorizontal: '3%',
    textAlign: 'center',
    justifyContent: 'center',
  },
});

Answer 1

希望这段代码对你有很大帮助

     import React, {useRef} from 'react';
        import {View, StyleSheet, Button, Text, Dimensions} from 'react-native';
        import ReelGroup from '../Slots/ReelGroup';
        
        export default function RandomStockScreen(props) {
          const reelGroup = useRef();
        
          return (
            <View style={styles.container}>
              <Text style={styles.titleText}>Myster Stock</Text>
              <View style={styles.slotsContainer}>
                <ReelGroup ref={reelGroup} />
              </View>
              <View style={styles.buttonContainer}>
                <Button title="New Stock" onPress={() => reelGroup.current.spin()} />
              </View>
            </View>
          );
        }
        
      const styles = StyleSheet.create({
      titleText: {
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
    marginTop: "10%",
    textAlign: "center",
    borderWidth: 1,
    flex: 0.15,
  },
  container: {
    flex: 1,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
    flexDirection: "column",
    justifyContent: "space-around",
    backgroundColor: "black",
  },
  slotsContainer: {
    flex: 0.7,
    marginHorizontal: "3%",
    justifyContent: "space-evenly",
    backgroundColor: "grey",
  },
  buttonContainer: {
    flex: 0.15,
    backgroundColor: "blue",
    marginTop: "1%",
    marginHorizontal: "3%",
    textAlign: "center",
    justifyContent: "center",
  },

我在容器和按钮容器样式中更改了一些矿工，并添加了一个组件名称维度。 你可以根据你的要求调整