React Native：TextInput在放入視圖時消失

當前我正在學習React Native，並在書籍的幫助下解釋瞭如何構建應用程序。但是由於這個錯誤/錯誤，我無法繼續。這發生在IOS，不知道這是否也發生在Android上，因爲我沒有設置我的Android模擬器只是噴氣式飛機。React Native：TextInput在放入視圖時消失

我的<View>集裝箱有兩個<TextInputs>，工作正常。當我將兩個輸入封裝到視圖中時，它們只是「消失」。

這裏是我的組件NoteScreen.js：

import React, { 
    Component, 
    StyleSheet, 
    TextInput, 
    View 
} from 'react-native'; 

export default class NoteScreen extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="title" 
         autoFocus={true} 
           autoCapitalize="sentences" 
      placeholder="Untitled" 
      style={styles.title} 

      onEndEditing={(text) => {this.refs.body.focus()}} 
      /> 
     </View> 
     <View style={styles.inputContainer}> 
      <TextInput 
      ref="body" 
      multiline={true} 
      placeholder="Start typing" 
      style={styles.body} 

      textAlignVertical="top" 
      underlineColorAndroid="transparent" 
      /> 
     </View> 
     </View> 
     ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     marginTop: 64 
    }, 
    textInput: { 
     color: '#ffffff', 
     flex: 1, 
     width: 60, 
     height: 60, 
     fontSize: 16 
    }, 
    inputContainer: { 
     borderBottomColor: '#9E7CE3', 
     borderBottomWidth: 1, 
     flex: 1, 
     flexDirection: 'row', 
     marginBottom: 10 
    }, 
    title: { 
     fontFamily: 'Overpass-Bold', 
     height: 40 
    }, 
    body: { 
     fontFamily: 'Overpass-Bold', 
     flex: 1 
    } 
});

我做了一些研究，發現了一些奇怪的事情;

我輸入兩者有一個寬度和高度
的輸入也消失了，如果他們沒有應用任何樣式
這僅與文本輸入發生，正常的文本只是渲染。

一些有識之士將是巨大的，我想這是一個錯誤，或者我只是俯瞰東西..

來源

2016-04-18 Fabian Tjoe A On

我想你的例子（機器人），並用精確的代碼，你提供的，屏幕是完全空的。如果沒有文本輸入樣式，它們不會顯示，並且您已將styles.title和styles.body設置爲TextInput組件 - > styles.title和styles.body中沒有（寬度和高度）。所以你可以做的是：

添加width你的標題和正文風格

或

樣式添加到文本的數組輸入和TextInput和爲標題適用這兩種風格/ body like this：style={[styles.textInput, styles.title]} and style={[styles.textInput, styles.body]}

這裏是工作代碼這兩個建議，我給你：

import React, { 
AppRegistry, 
    Component, 
    StyleSheet, 
    TextInput, 
    View 
} from 'react-native'; 

export default class NoteScreen extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="title" 
         autoFocus={true} 
         autoCapitalize="sentences" 
         placeholder="Untitled" 
         style={styles.title} 

         onEndEditing={(text) => {this.refs.body.focus()}} 
        /> 
       </View> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="body" 
         multiline={true} 
         placeholder="Start typing" 
         style={[styles.textInput, styles.body]} 

         textAlignVertical="top" 
         underlineColorAndroid="transparent" 
        /> 
       </View> 
      </View> 
     ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     marginTop: 64 
    }, 
    textInput: { 
     color: '#ffffff', 
     flex: 1, 
     width: 60, 
     height: 60, 
     fontSize: 16 
    }, 
    inputContainer: { 
     borderBottomColor: '#9E7CE3', 
     borderBottomWidth: 1, 
     flex: 1, 
     flexDirection: 'row', 
     marginBottom: 10 
    }, 
    title: { 
     fontFamily: 'Overpass-Bold', 
     height: 40, 
     width: 40 
    }, 
    body: { 
     fontFamily: 'Overpass-Bold', 
     flex: 1 
    } 

});

來源

2016-04-19 07:57:55 Vikky

真棒，謝謝您的回答！ Apperently我沒有發佈我的舊代碼，我有styles.textInput和styles.body/title應用，但是，我沒有把它們放在一個數組中。 –

不客氣！我很高興你解決了它！:) – Vikky

謝謝你好先生！ – Trip

我相信，我們正在讀同一本書，becausee我有同樣的問題。

我通過在容器風格去除alignItems: 'center'和添加flex: 1到inputContainer風格的解決了這個問題。它看起來仍然不像書本樣本，但至少現在可以看到這些字段。

這裏是我的代碼如下所示：

import React, { StyleSheet, Text, TextInput, View } from "react-native"; 
import dismissKeyboard from "dismissKeyboard"; 

export default class NoteScreen extends React.Component { 

    render() { 
     handleTitleEditingEnd = (text) => { this.refs.body.focus(); }; 

     return (
      <View style={styles.container}> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="title" 
         placeholder="Untitled" 
         style={[styles.textInput, styles.title]} 
         onEndEditing={handleTitleEditingEnd} 
         returnKeyType="next" 
        /> 
       </View> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="body" 
         multiline={true} 
         placeholder="Start typing" 
         style={[styles.textInput, styles.body]} 
        /> 
       </View> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: "center", 
     // alignItems: "center", 
     marginTop: 64 
    }, 
    inputContainer: { 
     borderBottomColor: "#9E7CE3", 
     borderBottomWidth: 1, 
     flexDirection: "row", 
     marginBottom: 10, 
     flex: 1, 
    }, 
    textInput: { 
     flex: 1, 
     fontSize: 16, 
    }, 
    title: { 
     height: 40, 
    }, 
    body: { 
     flex: 1, 
    } 
});

來源

2016-04-30 19:55:14

我用下面的代碼解決了這個問題：

import React, { 
    StyleSheet, 
    TextInput, 
    View 
} from 'react-native'; 

export default class NoteScreen extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.inputContainer}> 
      <TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, styles.title]} onEndEditing={(text) => {this.refs.body.focus()} }/> 
     </View> 
     <View style={styles.inputContainer}> 
      <TextInput ref="body" multiline={true} placeholder="Start typing" style={[styles.textInput, styles.body]}/> 
     </View> 
     </View> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    marginTop: 64 
    }, 
    title: { 
    height: 40 
    }, 
    body: { 
    height: 160, 
    flex: 1 
    }, 
    inputContainer: { 
    borderBottomColor: '#9E7CE3', 
    borderBottomWidth: 1, 
    flexDirection: 'row', 
    marginBottom: 10 
    }, 
    textInput: { 
    flex: 1, 
    fontSize: 16, 
    width: 300, 
    } 
});

來源

2016-06-05 02:51:58 Synix

React Native：TextInput在放入視圖時消失

回答

相關問題