0

我正在构建一个简单的 bughouse（4 人国际象棋）游戏作为我的第一个 React Native 应用程序，我对样式问题有点困惑。渲染ImageBackground包含 a 的 时会出现此问题，其中包含（棋盘）View的网格。Views使用此问题之后列出的代码时，视图不包含在屏幕中（请参见下面的屏幕截图）。如何设置View包含在一个中的样式，ImageBackground以便View保持包含在中ImageBackground？

截屏

我已经尝试了我能想到的一切，但没有任何帮助。我怀疑这个问题与ImageBackground未正确设置的尺寸有关，实际上超出了屏幕边缘。当我注释掉width: Dimensions.get('screen').width,instyles.board中的行时，BoardView.js图像ImageBackground也填满了同样太大的空间。

这是意见/Game.js：

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
  SafeAreaView,
  View,
  StyleSheet,
  Platform,
  StatusBar,
} from 'react-native';

import { BoardView } from '../components/BoardView';
import { Navbar } from '../components/Navbar';


export function Game () {
    const styles = StyleSheet.create({
        mainContainer: {
            flex: 1,
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
        },
        bottomBar: {
            flex: 2,
            width: '100%',
            backgroundColor: 'black',
            justifyContent: 'center',
        },
    });
    return (
        <SafeAreaView style={styles.mainContainer}>
            <Navbar />

            <BoardView />

            <View style={styles.bottomBar}>
                
            </View>
        </SafeAreaView>
    );
}

这是组件/BoardView.js：

import React, { Component } from 'react';
import {
    StyleSheet,
    ImageBackground,
    Dimensions
} from 'react-native';

import { Pieces } from "./Pieces";


export function BoardView () {
    const styles = StyleSheet.create({
        board: {
            flex: 10,
            width: Dimensions.get('screen').width,
        },
    });
    return (
        <ImageBackground
            resizeMode='contain'
            style={styles.board}
            source={require('../assets/board.png')}
        >
            <Pieces />
        </ImageBackground>
    );
}

这是组件/Pieces.js：

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
} from 'react-native';


export function Pieces () {
    const styles = StyleSheet.create({
        grid: {
            borderColor: 'green',
            borderWidth: 5,
            alignSelf: 'center',
            aspectRatio: 1,
            overflow: 'visible',
            width: '100%',
            height: '100%',
        },
        gridRow: {
            flexDirection: 'row',
            flex: 1,
        },
        gridTile: {
            borderWidth: 1,
            borderColor: 'green',
            flex: 1,
            height: '100%',
        },
        test: {
            color: 'green',
        },
    });

    let pieces = [
        [['bRook'],['bKnight'],['bBishop'],['bQueen'],['bKing'],['bBishop'],['bKnight'],['bRook']],
        [['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn']],
        [['wRook'],['wKnight'],['wBishop'],['wQueen'],['wKing'],['wBishop'],['wKnight'],['wRook']],

    ];

    return (
       <View style={styles.grid}>
            {pieces.map((row, index) =>(
                <View style={styles.gridRow} key={index}>
                    {row.map((tile, index) => (
                        <View style={styles.gridTile} key={index}>
                            <Text style={styles.test}>
                                {tile}
                            </Text>
                        </View>
                    ))}
                </View>
            ))}
       </View>
    );
}

我如何设置样式以使View保持包含在ImageBackground？非常感谢您的帮助！

4

0 回答 0