Question

我在YouTube上观看了有关React Native的教程。

我已经建立了一个简单的塞子应用程序。（Android）问题是，在发布版本中，缺少其中一个字母。我尝试用“Hello”构建另一个简单的应用程序，在我手机的发布版本中，而不是显示“Hello”，我得到“Hell”。

图片：

使用Nexus 6（AVD）进行开发构建：

使用LG G4（物理）发布版本：

我不知道为什么会这样。我感谢任何建议和帮助。

编辑：index.android.js：

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableHighlight
} from 'react-native'

class flexbox extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.header]}>
          <View style={[styles.timeWrapper]}>
            <Text style={styles.timer}>00:00.00</Text>
          </View>
          <View style={[styles.buttonWrapper]}>
            <TouchableHighlight onPress={() => console.log('Start')} underlayColor="#2ecc71" style={[styles.button, styles.startButton]}>
              <Text>Start</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => console.log('Lap')} underlayColor="#1abc9c" style={[styles.button, styles.lapButton]}>
              <Text>Lap</Text>
            </TouchableHighlight>
          </View>
        </View>
        <View style={[styles.footer]}>
          <Text>Laps</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    flex: 1
  },
  footer: {
    flex: 1
  },
  timeWrapper: {
    flex: 5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonWrapper: {
    flex: 3,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  timer: {
    fontSize: 60,
    color: 'black'
  },
  button: {
    borderWidth: 2,
    height: 100,
    width: 100,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center'
  },
  startButton: {
    borderColor: '#2ecc71'
  },
  lapButton: {
    borderColor: '#1abc9c'
  }
})

AppRegistry.registerComponent('flexbox', () => flexbox)

Answer 1

您还没有提供任何代码，但我猜测您创建了一个具有确切宽度和高度的视图，并且为了让文本位于中间，您添加了填充。

以下是带有文字的工作圈示例：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.circle}>
          <Text>Hello</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  circle: {
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: 'red',
    borderWidth: 3,
  }
});

或参见sketch

中的示例

React Native发布了一封字母遗失

1 个答案: