Reactネイティブリリース手紙がありません

Question

YouTubeでReact Nativeに関するチュートリアルを見ました。

シンプルなストッパーアプリを作りました。 （Android）問題は、リリースビルドでは、文字のいずれかが欠落しています。私はちょうど "こんにちは"を持って、別のシンプルなアプリケーションを構築しようとしました。

画像：

開発ビルド使用してネクサス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