Flexwrap: проблема заполнения элементов «обернуть» в React Native

У меня есть проблема, которую я не смог решить. Взгляните на этот скриншот: Flexwrap: проблема заполнения элементов «обернуть» в React Native

Код, отображающий кнопки Utility & Sequences, выглядит следующим образом:

<Fragment>
    <Text style = {styles.sectionTitle}>Utility</Text>
    <View style = {styles.buttonContainer}>
        <Button onPress = {this.readErrorObject} style = {styles.button} title='Get Error' />
        <Button onPress = {this.readDump} style = {styles.button} title='Read Dump' />
        <Button onPress = {this.readLog} style = {styles.button} title='Read Log' />
        <Button onPress = {this.clearError} style = {styles.button} title='Clear Error' />
    </View>
    <Text style = {styles.sectionTitle}>Sequences</Text>
    <View style = {styles.buttonContainer}>
       <Button onPress = {this.firstRun} style = {styles.button} title='First Run' />
       <Button onPress = {this.resetDevice} style = {styles.button} title='Reset Device' />
    </View>
</Fragment>

Стили

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000000'
  },
  buttonContainer: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignContent: 'space-between'
  },
  button: {
    marginVertical: 8 // DOESN'T WORK
  }
})

Когда четвертая кнопка падает на следующую строку, я хочу иметь интервал между новой строкой и строкой выше. Я пытаюсь добавить стиль для каждой кнопки с полем, но это не имеет значения. Я что-то здесь упускаю? Заранее спасибо.

Вы пытались удалить flex: 1 из buttonContainer? Много раз поведение flex перезаписывает статические поля.

vitosorriso 25.07.2019 21:33
2
1
1 335
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом деле кнопка из react-native не имеет стиля в качестве реквизита ( https://facebook.github.io/react-native/docs/button.html ), поэтому вы можете обернуть каждую кнопку с помощью View и применить стиль


    <View style = {styles.buttonContainer}>
              <View style = {{margin:30}}>
              <Button onPress = {this.readErrorObject} style = {styles.button} title='Get Error' />
              </View>
              <View style = {{margin:30}}>
              <Button onPress = {this.readDump} style = {styles.button} title='Read Dump' />
              </View>
              <View style = {{margin:30}}>
              <Button onPress = {this.readLog} buttonStyle = {styles.button} title='Read Log' />
              </View>
              <View style = {{margin:30}}>
              <Button onPress = {this.clearError} buttonStyle = {styles.button} title='Clear Error' />
              </View>
   </View>

или вы можете использовать форму кнопок, реагирующих на собственные элементы, которые имеют buttonStyle ( https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle ) в качестве реквизита. или вы можете использовать TouchableOpacity из react-native, у которого есть стиль в качестве опоры.

Другие вопросы по теме