У меня есть проблема, которую я не смог решить.
Взгляните на этот скриншот:
Код, отображающий кнопки 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
}
})
Когда четвертая кнопка падает на следующую строку, я хочу иметь интервал между новой строкой и строкой выше. Я пытаюсь добавить стиль для каждой кнопки с полем, но это не имеет значения. Я что-то здесь упускаю? Заранее спасибо.
На самом деле кнопка из 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, у которого есть стиль в качестве опоры.
Вы пытались удалить
flex: 1
из buttonContainer? Много раз поведениеflex
перезаписывает статические поля.