在React Native中使视图的父级宽度为80％

猴子猪猪2020-03-13

我正在React Native中创建一个表单，并希望使TextInput屏幕宽度达到80％。

使用HTML和普通CSS，这很简单：

input {
    display: block;
    width: 80%;
    margin: auto;
}

除了React Native不支持display属性，宽度百分比或自动边距。

那我该怎么办呢？有这个问题的一些讨论中作出反应原住民的问题跟踪器，但提出的解决方案似乎是讨厌的黑客。

阳光乐2020/03/13 00:27:27

这就是我得到解决方案的方式。简单而甜美。与屏幕密度无关：

export default class AwesomeProject extends Component {
    constructor(props){
        super(props);
        this.state = {text: ""}
    }
  render() {
    return (
       <View
          style={{
            flex: 1,
            backgroundColor: "#ececec",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <View style={{ padding: 10, flexDirection: "row" }}>
            <TextInput
              style={{ flex: 0.8, height: 40, borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Text 1"
              value={this.state.text}
            />
          </View>
          <View style={{ padding: 10, flexDirection: "row" }}>
            <TextInput
              style={{ flex: 0.8, height: 40, borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Text 2"
              value={this.state.text}
            />
          </View>
          <View style={{ padding: 10, flexDirection: "row" }}>
            <Button
              onPress={onButtonPress}
              title="Press Me"
              accessibilityLabel="See an Information"
            />
          </View>
        </View>
    );
  }
}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer