Question

我试图将'row'的'flexDirection'属性应用到我的布局，但是根据所使用的方法，输出会有所不同。我想了解一下为什么本机反应如此。

我尝试使用不同的属性来达到所需的结果。

Keypad.js

import React from 'react';
import { View } from 'react-native';

import Keys from './Keys';

import styles from './styles';

let rows = [];
let nums = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
for (let i = 0; i < 3; i++) {
  let row = [];
  for (let j = 0; j < 3; j++) {
    row.push(<Keys number={nums[i][j]} />);
  }
  rows.push(<View style={"this is where the problem occurs"}>{row}</View>);
}

const Keypad = () => <View>{rows}</View>;

export default Keypad;

Keys.js

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

import styles from './styles';

const Keys = ({ number }) => (
  <TouchableOpacity style={styles.button}>
    <Text style={styles.number}>{number}</Text>
  </TouchableOpacity>
);

export default Keys;

styles.js

import EStyleSheet from 'react-native-extended-stylesheet';

export default EStyleSheet.create({
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  number: {
    fontSize: 40
  },
  row: {
    flexDirection: 'row'
  }
});

index.js

import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';

import TestScreen from './screens/TestScreen';

EStyleSheet.build({
  // WelcomePage
  $white: '#FFFFFF',
  $black: '#000000',
  $getStartedBlue: '#40A5D6',
  $welcomeMessage: '#767676',

  // VerificationPage
  $primaryBackground: '#C3C3C3',
  $secondBackground: '#40A5D6',
  $numbers: '#352641',
  $backspace: '#9599B3',
  $nextButton: '#0062CC'

  // $outline: 1
});

export default () => <TestScreen />;

App.js

import App from './app/index';

export default App;

我希望数字以小键盘的形式出现。我已经在Keypad.js中标记了问题所在的行。

当我使用时：

rows.push(<View style={{ flexDirection: 'row' }}>{row}</View>);

作为样式属性，我获得了所需的输出（数字1-9的小键盘）。

但是当我使用时：

rows.push(<View style={styles.row}>{row}</View>);

然后所有数字相互重叠，并在屏幕上显示为污迹。

据我了解，这是应用相同属性的另一种方法，那么结果为何不同？

Answer 1

您可能错过了docs的重要部分，

在应用入口点调用EStyleSheet.build（）以实际计算样式：

您需要将此文件添加到app.js文件中，

/* app.js */
import EStyleSheet from 'react-native-extended-stylesheet';

EStyleSheet.build({ // always call EStyleSheet.build() even if you don't use global variables!
  $textColor: '#0275d8'
});

为什么以两种不同方式调用样式属性会产生不同的结果？

1 个答案: