React組件的本機更新風格

我試圖在道具更改時更新TouchableOpacity組件的樣式。我調用了一個函數，它負責返回樣式。在該函數中，我記錄了area.included的值。它會返回正確的值，但樣式不會適當更新。React組件的本機更新風格

<TouchableOpacity style={this.getRowStyle(area)} onPress={() => this.navToArea(area)}> 
    <Text>Some Random Text</Text> 
</TouchableOpacity> 

getRowStyle(area) { 
    console.log('area included', area.included) 
    if (area.included) { 
    return styles.swipeContainer 
    } else { 
    return styles.swipeContainerOpacity 
    } 
} 

const styles = StyleSheet.create({ 
    swipeContainer: { 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    padding: 15, 
    }, 
    swipeContainerOpacity: { 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    padding: 15, 
    opacity: 0.2, 
    }, 
})

來源

2017-06-05 Molly Harper

你可以顯示'styles'的定義嗎？它在'getRowStyle'範圍內嗎？ – FuzzyTree

@FuzzyTree我將它添加到我的問題。 –

，如果你只是想切換beetween兩個不同的樣式類，您還可以將它們添加到一個條件是這樣的：

<TouchableOpacity style={this.state.areaIncluded ? [styles.swipeContainer] : [styles.swipeContainerOpacity]} onPress={() => this.navToArea(area)}> 
    <Text>Some Random Text</Text> 
</TouchableOpacity>

希望這可以幫助你開始！

來源

2017-06-05 04:54:18

這不起作用，謝謝。 –

我注意到，除了不透明度外，您的樣式都相似，因此您可以添加一個swipeContainer類作爲主樣式元素併爲不透明度添加條件值 –

我最終通過添加內聯條件來解決這個問題。我仍然認爲我所做的應該是有效的。潛在的反應錯誤？

{area.included && 
<TouchableOpacity style={styles.swipeContainer} onPress={() => this.navToArea(area)}> 
    <Text>Some Random Text</Text> 
</TouchableOpacity> 
} 
{!area.included && 
<TouchableOpacity style={styles.swipeContainerOpacity} onPress={() => this.navToArea(area)}> 
    <Text>Some Random Text</Text> 
</TouchableOpacity> 
}

來源

2017-06-05 17:39:37

React組件的本機更新風格

回答

相關問題