React Native：如何使用 textInput 内联切换开关？

Question

这是我目前所做的：

我希望文本输入一直延伸到框的末尾。

这是我的代码：

<View style={{ flexDirection: 'row' }} >
     <Switch style={styles.switch}
             trackColor={{true: "#36d79a", false: 'grey'}}
             thumbColor={{true: "#36d79a", false: 'grey'}}
     />
    <Input right placeholder="Type your custom question here." iconContent= 
   {<Block />} 
     />
</View>

Answer 1

将 justifyContent: 'space-between' 添加到您的主视图。或者，您始终可以使用占位符视图： <View style={{ flex: 1 }}。您可以将该占位符放在 Switch 和 Input 之间。

Answer 2

要沿 flexboxes 的主轴填充 space，请将 flex 属性与数值应用于 flex 子项。该数字指定可用 space 在 flex 子项之间的分配比例。有关详细信息，请参阅 flexbox 上的文档。

在您的情况下，您只需为 <Input /> 指定 flex: 1，这意味着仅允许此组件填充 space 的其余部分。我创建了这个 React Native & MUI Codesandbox 来演示它。

<View style={{ flexDirection: 'row' }} >
     <Switch style={styles.switch}
             trackColor={{true: "#36d79a", false: 'grey'}}
             thumbColor={{true: "#36d79a", false: 'grey'}}
     />
    <Input style={{ flex: 1 }} right placeholder="Type your custom question here." iconContent= 
   {<Block />} 
     />
</View>

React Native：如何使用 textInput 内联切换开关？

React Native: How to inline a toggle switch with a textInput?

react-native

argon