如何在兩個Text組件之間放置一個TextInput并很好地包裹它？-有解無憂

我目前正在嘗試在兩個 Text 組件之間放置一個 TextInput，但它的包裝不是很好。這是現在的樣子，文本被包裹在 TextInput 上方而不是在同一行上：

如何在兩個 Text 組件之間放置一個 TextInput 并很好地包裹它？

我想在這里實作類似于下圖的內容，其中 Text 與 TextInput 環繞在同一行上：

如何在兩個 Text 組件之間放置一個 TextInput 并很好地包裹它？

這是我的代碼：

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row_container}>  
        
        <Text>I have not been given notice of unpaid leave for a period of</Text>
        
        <View style={{width: 50, height: 30}}>
          <TextInput style={styles.text_input}/>
        </View>
        
        <Text>days on the date of this application. </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',    
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  row_container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  text_input: {
    backgroundColor: 'white',
    borderColor: 'grey',
    borderWidth: 1,
  },
});

如何在兩個 Text 組件之間放置一個 TextInput 并很好地包裹它？

編輯：
如果你想的TextInput的變化高度，您可能需要因為有點hackish的解決方案display: 'inline'中，不支持原生的反應（僅適用于網路），看看那里我添加下面lineHeight: 25就Text和marginBottom: -10在TextInput：

  <Text style={{lineHeight: 25}}>
  {'I have not been given notice of unpaid leave for a period of '}
  <View>
    <TextInput style={{ backgroundColor: 'white', height: 30, width:50, marginBottom: -10 }} />
  </View>
  {' days on the date of this application. Lorem ipsum dotem done fou'}
</Text>

如何在兩個 Text 組件之間放置一個 TextInput 并很好地包裹它？

uj5u.com熱心網友回復：

好像css結構不行...

    import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row_container}>  
        
        <Text>I have not been given notice of unpaid leave for a period of</Text>
        
        <View style={{display:"inline"}}>
          <TextInput style={styles.text_input}/>
        </View>
        
        <Text>days on the date of this application</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  row_container: {
   display:"inline"
  },
  text_input: {
    backgroundColor: 'white',
     width: 50,
     height: 30,
     marginLeft:"10px",
       marginRight:"10px"
  },
});

https://snack.expo.dev/mh8RoCqYQ

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/376816.html

標籤：css 反应原生弹性盒

上一篇：如何在ReactNative的組件中使用keyprop

下一篇：ReactNative：影像未正確顯示