如何在Android中定义react native中元素的高度？

km0tfn4u 于 2023-04-12 发布在 React

关注(0)|答案(2)|浏览(252)

我目前正在开发一个应用程序将用于Android平板电脑，不幸的是，我得到了舒适，并添加了太多的功能在网页视图之前，再次测试在Android上，现在他们看起来很不一样.我有一些元素在一个flex-box view与flex-direction 'row'，这是他们在浏览器上的外观，他们应该如何看：

然后Android上的同一个应用程序看起来像这样：

您可以看到两行的输入没有合适的高度来适应文本，底部的第三行已经来自另一个输入。
这是组件代码（我删除了一个输入行以使其更简单）：

<View>
  <Text style={styles.header}>
    {LanguageService(language).form.personalData}:
  </Text>
  <View style={styles.twoColumns}>
    <View style={styles.inputWrapper}>
      <Text>
        {LanguageService(language).form.firstName}:
      </Text>
      <TextInput
        style={styles.input}
        onChangeText={formikProps.handleChange('firstName')}
        value={formikProps.values.firstName}
        maxLength={20}
      />
    </View>
    <View style={styles.inputWrapper}>
      <Text>
        {LanguageService(language).form.phone}:
      </Text>
      <TextInput
        style={styles.input}
        onChangeText={formikProps.handleChange('phoneNumber')}
        value={formikProps.values.phoneNumber}
        keyboardType='phone-pad'
        maxLength={15}            
      />
    </View>
  </View>
</View>

这里是风格：

const styles = StyleSheet.create({
  twoColumns: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',  
  },
  inputWrapper: {
    width: '48%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderBottomWidth: 1,
    borderBottomColor: 'black',
    margin: 10,
  },
  input: {
    flexGrow: 1,
    paddingLeft: 5,
  },
  header: {
    color: 'red',
    fontWeight: 'bold',
    fontSize: 22,
  },
}

react-native

来源：https://stackoverflow.com/questions/72949556/how-to-define-height-to-an-element-in-react-native-in-android

2条答案

按热度按时间

pgvzfuti1#

我想你可以用这个结构来实现第一张图中的形状：

<View style={styles.container}>
  <View style={styles.headerContainer}>
    <Text style={styles.header}>
      {LanguageService(language).form.personalData}:
    </Text>
  </View>
  <View style={styles.inputsContainer}>
    <View stlye={styles.leftContainer>
      <View style={styles.inputWrapper}>
        <Text>
          {LanguageService(language).form.firstName}:
        </Text>
        <TextInput
          style={styles.input}
          onChangeText={formikProps.handleChange('firstName')}
          value={formikProps.values.firstName}
          maxLength={20}
         />
      </View>
    </View>
    <View stlye={styles.rightContainer>
      <View style={styles.inputWrapper}>
        <Text>
          {LanguageService(language).form.phone}:
        </Text>
        <TextInput
          style={styles.input}
          onChangeText={formikProps.handleChange('phoneNumber')}
          value={formikProps.values.phoneNumber}
          keyboardType='phone-pad'
          maxLength={15}            
        />
      </View>
    </View>
  </View>
</View>

款式：

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column'
  },
  headerContainer: {
    flex: 0.5
  },
  inputsContainer: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row'
  },
  leftContainer: {
    flex: 1
  },
  rightContainer: {
    flex: 1
  }
  inputWrapper: {
    width: '48%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderBottomWidth: 1,
    borderBottomColor: 'black',
    margin: 10,
  },
  input: {
    flexGrow: 1,
    paddingLeft: 5,
  },
  header: {
    color: 'red',
    fontWeight: 'bold',
    fontSize: 22,
  },
}

赞(0）回复(0）举报 2023-04-12

prdp8dxp2#

我通过删除以下行来解决这个问题：

const styles = StyleSheet.create({
  twoColumns: {
    flex: 1,
  }
}

赞(0）回复(0）举报 2023-04-12

我来回答

如何在Android中定义react native中元素的高度？

2条答案

相关问题

热门标签

最新问答