格式在JavaScript中無法正常工作

-1

問題在反應原生和JavaScript中，我正在編寫一個應用程序。加載字體的按鈕佔用了一半的屏幕，而實際的應用佔用了另一半。我想知道如何讓按鈕佔據頂部，然後讓應用程序的其他部分渲染得更大。幫助會很棒！格式在JavaScript中無法正常工作

代碼

import React, { Component } from 'react'; 
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native'; 
import { Font } from 'expo'; 

var fontLoaded = false; 

export default class App extends React.Component { 

    state = { 
    fontLoaded: false, 
    }; 

    componentDidMount() { 
     Expo.Font.loadAsync({ 
     'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'), 
     }); 
} 
    constructor(props) { 
    super(props); 
    this.state = { postInput: ""} 
    } 

render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.container}> 
      <View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} /> 
      <Button 
      onPress={() => this.setState({ fontLoaded: true })} 
      title="Press Me To Load the App After 15 Seconds!" 
      color="#fe8200" 
      accessibilityLabel="Wait 15 seconds and then press me to load the font!" 
      /> 
     </View> 


     {this.state.fontLoaded ? (
      <View style={styles.container}> 
      <Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}> 
       Whats on your mind? Create a post! 
      </Text> 

      <TextInput 
       style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}} 
       onChangeText={(postInput)=>this.setState({postInput})} 
       value={this.state.postInput}  
      /> 



     <Button 
       title="   +   " 
       color="#fe8200" 
       accessibilityLabel="Wait 15 seconds and then press me to load the font!" 
      /> 

      <ScrollView> 
       <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /> 
       <View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} /> 
       <View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} /> 
       <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /> 
       <View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} /> 
       <View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} /> 
       <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /> 
      </ScrollView> 
      </View>) : (null) } 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#e8e8e8', 
    alignItems: 'center', 
    justifyContent: 'center' 
    }, 
});

截圖

來源

2017-10-16 GIISE

在SO上，您應該嘗試**自己編寫代碼**。後** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有問題，你可以**發佈你已經嘗試**與清楚的解釋是什麼是'工作**並提供** [最小，完整和可驗證示例]（// stackoverflow.com/help/mcve)**。 – Rob

-1

您可以使用Flexbox將實現這一目標。將flex屬性視爲比率。如果你給你的按鈕容器一個flex，並給它下面的容器flex爲3，他們的比例將是3：1。

來源

2017-10-16 01:59:42

這是一條評論，並沒有回答這個問題。請不要在答案部分留下評論。請刪除這個。但是這個問題無論如何都是無關緊要的，不應該被回答。 – Rob

太棒了，謝謝！它現在運行得更好！ – GIISE

格式在JavaScript中無法正常工作

回答

相關問題