Новый, чтобы реагировать на родной и пытается стилизовать страницу, на которую я добавил таблицу. Я хочу изменить цвет фона страницы, но не могу понять, если кто-нибудь может дать мне руку, а также на столе у ​​меня есть кнопка, но немного влево (см. Скриншот) Я пробовал использовать разные позиционные опции, но ничего не меняется, как я могу центрировать кнопку внутри ячейки?

Благодарность

import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native"; import { Table, TableWrapper, Row, Cell } from "react-native-table-component"; export default class ExampleFour extends Component { constructor(props) { super(props); this.state = { tableHead: ["Head", "Head2", "Head3", "Head4"], tableData: [ ["1", "2", "3", "4"], ["a", "b", "c", "d"], ["1", "2", "3", "4"], ["a", "b", "c", "d"] ] }; } _alertIndex(index) { Alert.alert(`This is row ${index   1}`); } render() { const state = this.state; const element = (data, index) ={amp}gt; ( {amp}lt;TouchableOpacity onPress={() ={amp}gt; this._alertIndex(index)}{amp}gt; {amp}lt;View style={styles.btn}{amp}gt; {amp}lt;Text style={styles.btnText}{amp}gt;button{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/TouchableOpacity{amp}gt; ); return ( {amp}lt;View style={styles.container}{amp}gt; {amp}lt;Table borderStyle={{ borderWidth: 1 }}{amp}gt; {amp}lt;Row data={state.tableHead} style={styles.head} textStyle={styles.text} /{amp}gt; {state.tableData.map((rowData, index) ={amp}gt; ( {amp}lt;TableWrapper key={index} style={styles.row}{amp}gt; {rowData.map((cellData, cellIndex) ={amp}gt; ( {amp}lt;Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text} /{amp}gt; ))} {amp}lt;/TableWrapper{amp}gt; ))} {amp}lt;/Table{amp}gt; {amp}lt;/View{amp}gt; ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "#fff" }, head: { height: 40, backgroundColor: "#808B97" }, text: { margin: 6 }, row: { flexDirection: "row", backgroundColor: "white" }, btn: { width: 58, height: 18, backgroundColor: "black", borderRadius: 2 }, btnText: { textAlign: "center", color: "#fff" } }); 

Скриншот

изменить backgroundColor

  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "red" },// to change backgroundColor 

центр кнопки

 {amp}lt;TouchableOpacity style={styles.btn}//add style to this component in style btn: { width: 58, height: 18, backgroundColor: "black", borderRadius: 2, alignSelf:'center' }, 

вы можете увидеть на этой выставке

Чтобы изменить цвет фона, вы можете заменить контейнер backgroundColor который в настоящее время является "#fff" на "#fff" вам цвет и добавить alignSelf в center кнопки. См. Код ниже:

 import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native"; import { Table, TableWrapper, Row, Cell } from "react-native-table-component"; export default class ExampleFour extends Component { constructor(props) { super(props); this.state = { tableHead: ["Head", "Head2", "Head3", "Head4"], tableData: [ ["1", "2", "3", "4"], ["a", "b", "c", "d"], ["1", "2", "3", "4"], ["a", "b", "c", "d"] ] }; } _alertIndex(index) { Alert.alert(`This is row ${index   1}`); } render() { const state = this.state; const element = (data, index) ={amp}gt; ( {amp}lt;TouchableOpacity style={styles.btn} onPress={() ={amp}gt; this._alertIndex(index)}{amp}gt; {amp}lt;View style={styles.btn}{amp}gt; {amp}lt;Text style={styles.btnText}{amp}gt;button{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/TouchableOpacity{amp}gt; ); return ( {amp}lt;View style={styles.container}{amp}gt; {amp}lt;Table borderStyle={{ borderWidth: 1 }}{amp}gt; {amp}lt;Row data={state.tableHead} style={styles.head} textStyle={styles.text} /{amp}gt; {state.tableData.map((rowData, index) ={amp}gt; ( {amp}lt;TableWrapper key={index} style={styles.row}{amp}gt; {rowData.map((cellData, cellIndex) ={amp}gt; ( {amp}lt;Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text} /{amp}gt; ))} {amp}lt;/TableWrapper{amp}gt; ))} {amp}lt;/Table{amp}gt; {amp}lt;/View{amp}gt; ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "blue" }, head: { height: 40, backgroundColor: "#808B97" }, text: { margin: 6 }, row: { flexDirection: "row", backgroundColor: "white" }, btn: { width: 58, height: 18, backgroundColor: "black", borderRadius: 2, alignSelf:'center' }, btnText: { textAlign: "center", color: "#fff" } }); 

И для портретного и ландшафтного режима, он должен автоматически изменить это, если его в flex. Попробуйте это и надеюсь, что это поможет. не стесняйтесь сомнений