在React native中设置按钮样式

Posted 2021-04-30

我想为我的两个按钮实现样式！但是，一切都没有改变！我试图通过上面的视图样式传递样式，但是没有任何变化！这是代码

App.js

      <Text style={{marginTop:130,marginLeft:60,fontSize:25,marginVertical:150,borderRadius:2}}>Welcome to Daret !</Text>
        <Button style={styles.signin}
          title="Sign In"
          onPress={() => navigation.navigate('Sign In')}
        />
        <Button title="Registration" style= {styles.registration}
         onPress= {()=>navigation.navigate('Registration')}/>
    </View>

样式

      marginTop:50,
      width: 90,
      borderRadius:2 

    },

    registration : {

      width:20  ,
      borderRadius:2,
      alignItems:'center',
      backgroundColor:'black'

    }

答案

问题：

标准React Native Button没有更改其样式的道具，因为您可以查看Button Code。

解决方案：

代替标准按钮，尝试使用任何可触摸的（例如TouchableHighligt或TouchableOpacity）。您可以在那里传递样式对象以根据需要进行自定义。

另一答案

您可以像下面所使用的buttonStyle一样尝试使用此道具style

      <Button
        title='Login' 
        buttonStyle={{
          backgroundColor:'red'
        }}
      />