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

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

在您的情况下，您将仅为<Input />指定flex: 1 ，这意味着仅允许此组件填充空间的 rest 。 我创建了这个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>

Answer 2

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