如何在两个 Text 组件之间放置一个 TextInput 并让它包装得很好？

Posted 2023-02-16

【中文标题】如何在两个 Text 组件之间放置一个 TextInput 并让它包装得很好？

【英文标题】：How do I place a TextInput between two Text components and have it wrap nicely?

【发布时间】：2022-01-13 02:31:06

【问题描述】：

我目前正在尝试在两个 Text 组件之间放置一个 TextInput，但它的包装不是很好。这就是现在文本被包裹在 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,
  ,
);

Here's the snack link if it helps

【参考方案1】：

您可以像这样在Text 中添加TextInput：

<Text>
  'I have not been given notice of unpaid leave for a period of '
  <View style= width: 50, height: 10 >
    <TextInput style=styles.text_input />
  </View>
  ' days on the date of this application.'
</Text>

'' 里面的文字是为了在文字输入前后添加额外的空间。还改变了 View 的高度，以避免在下面的文字换行时占用额外的空间下面。

编辑： 如果您想更改 TextInput 的高度，您可能需要一些 hackish 解决方案，因为 react native 不支持 display: 'inline'（仅在网络上），请查看以下我在 Text 和 marginBottom: -10 上添加 lineHeight: 25 的地方在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 does not stay centre-aligned.

的对齐方式

为此，您必须在 textInput 中添加样式 in，请参阅编辑。

@WilsonChew 嗨，告诉我编辑是否适合你，我已经考虑过其他情况，但那时可能归结为设计选择和提供的解决方案。

是的，它对我有用，只是需要稍微调整 lineHeight

【参考方案2】：

好像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